/* =========================================================================
   store.css — the dino store (2026-08-23, New Age Dinos).
   Loaded only by store.html, after site.css and shop.css. No raw colour
   literals: theme tokens only, so the hatch theme (and every sibling) dresses
   it from the owner's own palette.

   THE SHAPE. A wallet strip of chips under the heading, the site's own
   `.tabs` as shelves, then a grid of specimen plates: each plate is a
   4:3 WINDOW the walking animal is drawn into (shopview.mjs draws every
   `.shopview[data-species]` into its own scissored rectangle of ONE page
   canvas), the species name in the display face, one line of facts, and the
   two tills as buttons whose LABEL IS THE PRICE - the loud one is the points
   price, the quiet one the supporter currency. A signed-out visitor sees the
   still render in the same window (the live assets are session-gated) and a
   single sign-in pill where the tills would be; nothing on this page is ever
   a dead button.
   ========================================================================= */

.st-head { text-align: center; }
.st-head p { margin-inline: auto; }

/* ---------- the wallet strip ---------- */
.st-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -4px 0 22px;
}
.st-bar[hidden] { display: none !important; }
.st-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--tm-hair, var(--edge));
  background: var(--surface);
  color: var(--fg-dim);
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
}
.st-chip b {
  font-family: var(--font-display, var(--font-ui));
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--fg);
}
.st-chip.st-chip-warn { color: var(--warn); border-color: var(--warn-dim, var(--warn)); }
.st-chip.st-chip-warn b { color: var(--warn); }
.st-hint {
  width: 100%;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
  margin-top: 2px;
}

/* ---------- shelves ---------- */
.st-shelves {
  display: inline-flex;
  max-width: 100%;
  margin: 0 auto 22px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.st-shelves[hidden] { display: none !important; }
.st-count {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--surface-3);
  color: var(--fg-mute);
  font: 600 10.5px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.st-shelves button[aria-selected="true"] .st-count {
  background: var(--surface); color: var(--fg-dim);
}

.st-status { text-align: center; min-height: 1.4em; }
.st-status:empty { display: none; }
.st-status.warn { color: var(--warn); }

/* ---------- the grid of plates ---------- */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.st-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.st-card[hidden] { display: none !important; }
.st-card::before { display: none; }         /* the house card's top rule; the window is the top here */

/* THE SPECIMEN WINDOW. 4:3, the still underneath, the live stage on top.
   `data-view="live"` is stamped by shopview.mjs when the animal is mounted;
   the still fades out under it so the two never double-expose. */
.st-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(70% 60% at 50% 72%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface-2, var(--surface));
  overflow: hidden;
}
.st-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: opacity .35s ease;
  pointer-events: none;
}
.st-still[hidden] { display: none !important; }
/* ★★★★★ `height: auto` IS LOAD-BEARING (2026-08-24). `shop.css` pins
   `.shopview { height: 218px }` for the SHOP page's own card, and `inset: 0`
   does not undo it: with `top`, `bottom` AND `height` all set, CSS is
   over-constrained and the explicit HEIGHT wins - `bottom` is ignored. So the
   stage measured 238x178 (its 4:3) while the render host inside it measured
   238x218, hung 40px past the bottom of a box with `overflow: hidden`, and the
   animal's FEET were cut off on every card. Ishaq, on the live shelf: *"its too
   small for the preview like the card is covering some of the species"*.
   `livecard.css` already carries this same line for the same reason ("shop.css
   pins a card height; a well fills") - this is the second surface to be bitten
   by that pin, so it is worth saying out loud in both. */
.st-stage .shopview {
  position: absolute;
  inset: 0;
  height: auto;
}
.st-card.is-live .st-still { opacity: 0; }
.st-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--bg-deep, var(--surface)) 72%, transparent);
  border: 1px solid var(--tm-hair, var(--edge));
  color: var(--fg-dim);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.st-tier.is-apex { color: var(--warn); border-color: var(--warn-dim, var(--warn)); }
.st-preview-note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--bg-deep, var(--surface)) 72%, transparent);
  color: var(--fg-mute);
  font-size: 11.5px;
  line-height: 1;
}

.st-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
/* The species name takes the house ITEM heading size - the same one every
   card-like surface on the site uses. A page sheet that picks its own number
   is how a site ends up with nineteen heading sizes nobody chose. */
.st-name {
  font-family: var(--font-display, var(--font-ui));
  font-weight: 400;
  font-size: var(--tm-h-item);
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0;
}
.st-meta {
  margin: 0;
  color: var(--fg-dim);
  font-size: 13.5px;
}
.st-meta .st-sandbox { color: var(--warn); }

/* THE TILLS. Two buttons whose label is the price; the points till wears the
   site's one loud button, the supporter till is the quiet outline. */
.st-buy {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.st-price {
  flex: 1 1 0;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  font-family: var(--font-display, var(--font-ui));
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .02em;
  line-height: 1;
}
.st-price small {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.st-price.st-credits { color: var(--fg); }
.st-price.st-credits:hover { border-color: var(--bad, var(--accent)); }
.st-signin { flex: 1 1 0; justify-content: center; }

/* THE ADMIN PRICE PENCIL (2026-08-24). LAYOUT ONLY - `.price-edit` and
   `.price-input` are dressed once in shop.css (which store.html loads before
   this sheet) and registered in terminal.css section 6b, so this page consumes
   the control rather than describing a second one.

   `.st-till` is a bare flex cell: no ground and no edge, because it is not a
   surface - it is the box that keeps a till and its pencil together when the
   row turns into a column on a phone. Without it the pencil wraps under the
   wrong price and edits the wrong cell in the reader's eye. */
.st-till {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
/* ★★★ A TILL MAY WRAP; A PRICE MAY NEVER BE NARROWER THAN ITS OWN LABEL.
   `flex: 1 1 0` lets a flex item shrink BELOW its content, and once a pencil
   started sharing the row the points button was squeezed until "12,000
   POINTS" rendered as ",000 POIN" - a shelf quoting a price that is not the
   price, which is the one thing a till may not do. Found by rendering the
   page; no test could see it, because the markup and the number were both
   correct and only the BOX was wrong.
   Basing on content and letting the ROW wrap drops the second till onto its
   own line on a narrow card instead of trimming a digit off the first. */
.st-buy { flex-wrap: wrap; }
.st-till { flex: 1 1 auto; }
.st-till .st-price {
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
}
/* The pencil is a fixed square. In a flex row it would otherwise be squeezed
   by a long price on a narrow card. */
.st-till .price-edit { flex: 0 0 auto; align-self: center; }
.st-till .price-input { flex: 1 1 0; min-width: 0; width: auto; }
/* THE TWO ANSWERS A SAVE CAN GIVE, on the button whose label IS the price.
   shop.css scopes these to `.item-price`, which this page has none of - the
   number lives inside a `.btn` here. Colour only: the flash says which way it
   went and the button keeps the house's own shape. */
.st-price.price-ok { color: var(--ok); }
.st-price.price-bad { color: var(--bad); }

/* ---------- the buy dialog ---------- */
.st-panel { max-width: 460px; }
.st-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.st-perks:empty { display: none; }
.st-perk {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 13px;
  border-radius: var(--r-s);
  border: 1px solid var(--tm-hair, var(--edge));
  background: var(--surface);
  color: var(--fg-dim);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.st-perk b { font-size: 14px; color: var(--fg); }
.st-perk span { font-size: 12px; color: var(--fg-mute); }
.st-perk[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.st-perk[aria-pressed="true"] b { color: var(--accent-hi, var(--accent)); }
.st-perk[disabled] { opacity: .45; cursor: not-allowed; }
.st-perks-note { width: 100%; font-size: 12.5px; color: var(--fg-mute); margin: 0; }
.st-dialog .buy-lines dd { font-family: var(--font-display, var(--font-ui)); font-weight: 400; font-size: 18px; letter-spacing: .02em; }
.st-dialog .buy-lines dd.st-short { color: var(--bad); }
.st-receipt { color: var(--ok); }

@media (max-width: 560px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-buy { flex-direction: column; }
  .st-shelves { margin-bottom: 18px; }
}