/* THE WANT MARKET'S SHELF AND ITS CARDS (Steven 2026-10-13).
   templates/feed/_recipes_shelf.html, static/js/pages/shop-shelf-cards.js.

   The shelf's rows are the landing's agent rows (feed/_ready_target_row.html
   agent_row, static/css/pages/ready-targets.css .rt-row--shelf): the
   picture, the title, "with" the agent, the agent's own line, the price and
   Get this, the proof line, the Cert seal on the corner. The title link,
   stretched over the row, opens the target's full card; Get this sits
   above it. The full card is THE ONE CARD (static/cards/card.css) in an
   overlay over the page, and its Details slides up the sheet (the step
   cards' sheet frame, re-drawn here so the shop needs no step cards
   sheet). Design tokens only. */

.wm-list { gap: var(--space-3); container-type: inline-size; }

/* THE ROW ITSELF is the landing's agent row since Steven 2026-10-13
   afternoon ("This might be a format we could use on the actual Want
   Market page"): feed/_ready_target_row.html agent_row, styled in
   static/css/pages/ready-targets.css (.rt-row--shelf). This file keeps the
   shelf, the full card over the page and the Details sheet. */

/* ── The full card over the page (the proposal mini cards' overlay) ──
   The card runs from the top of the screen (the safe area only) and its
   round X sits in its own top-right corner, riding the card (Steven
   2026-10-13 evening: no "vacant space at the top", no X top-left over the
   dimmed header). The X's look is the landing's popped card's, one rule in
   ready-targets.css (THE POPPED CARD'S X), which the shelf links. */
.wm-full {
  position: fixed;
  inset: 0;
  z-index: var(--z-detail-overlay);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-dark-800) 94%, transparent);
  animation: wm-full-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wm-full[hidden] { display: none; }
@keyframes wm-full-in { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }
.wm-full__card {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  transition: transform 0.2s ease-out;
  --tb-card-full-h: calc(100vh - var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@supports (height: 100dvh) {
  .wm-full__card { --tb-card-full-h: calc(100dvh - var(--space-3) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.wm-full__card .tb-card--full { min-height: 0; }
/* The card's Get this posts the purchase: show it is on its way. */
.wm-full__card .tb-card__cta[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
body.wm-lock { overflow: hidden; }

/* ── The Details sheet (the step cards' sheet frame, .sc-sheet) ── */
.wm-sheet { position: fixed; inset: 0; z-index: var(--z-detail-overlay); }
.wm-sheet[hidden] { display: none; }
.wm-sheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-dark-800) 45%, transparent); }
.wm-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 720px;
  height: 90vh;
  height: 90dvh;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-radius: var(--radius-hero) var(--radius-hero) 0 0;
  background: var(--surface-app);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  animation: wm-sheet-up 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes wm-sheet-up { from { transform: translateY(var(--space-10)); opacity: 0.4; } to { transform: none; opacity: 1; } }
.wm-sheet.is-dragging .wm-sheet__panel { animation: none; transition: none; }
.wm-sheet.is-settling .wm-sheet__panel { transition: transform 0.2s ease-out; }
.wm-sheet__top {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-2);
  background: inherit;
  cursor: grab;
  touch-action: none;
}
.wm-sheet__grab {
  display: block;
  width: var(--size-12);
  height: var(--space-1);
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
}
.wm-sheet__head { display: flex; align-items: center; justify-content: space-between; }
.wm-sheet__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.wm-sheet__x {
  width: var(--size-10);
  height: var(--size-10);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.wm-sheet__x svg { width: var(--size-6); height: var(--size-6); }
.wm-sheet__body .want-detail { max-width: none; padding: 0 0 var(--space-6); }
.wm-sheet__note { margin: var(--space-6) 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }
body.wm-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wm-full, .wm-full__card, .wm-sheet__panel { animation: none; transition: none; }
}