/* =============================================================================
   item.css — THE ITEM PAGE (#view-item), the deep-linked replacement for the
   old #itemModal overlay. Getgems item-page grammar mapped onto OUR theme vars
   (theme.css / market.css :root[data-theme] tokens), so both skins — 'wtf'
   pastel (default) and real 'dark' — read correctly with zero per-mode
   component rules. Loaded AFTER market.css; new classes are iv2-*; the reused
   modal panel builders (iv-offer / iv-ob-* / iv-dt-* / iv-at-*) keep their
   market.css styles and only get scoped refinements under #ivPanes.

   ACCENT NOTE. The spec's "blue" role = this site's ONE accent, which theme.css
   defines as the pink/red --p ramp (--p300 fill / --p600 legible accent text).
   Purple is reserved for RARITY pills only, via the --iv2-rar* locals below
   (no shared purple token exists; landing.css hard-codes #8B5CF6 the same way).

   DOM CONTRACT (what market.js renderItemPage builds — ids are load-bearing):

     <section id="view-item" hidden>            wrapper: max-w 1160, 32px gutters
       <a id="ivBack" class="iv2-back">…</a>    quiet text back link
       <div class="iv2-grid">                   2-col: minmax(0,42%) / 1fr, 64px
         <div id="ivMedia">                     sticky square, radius 24
           <div class="iv2-backdrop"></div>       z0 backdrop colour fill
           <div class="iv2-media">…</div>          z1 <img>/lottie svg/canvas
           <div class="iv2-chips">                z2 overlay chip buttons
             <button class="iv2-chip">…</button>
           </div>
         </div>
         <div id="ivRail">
           <h1 class="iv2-title">…</h1>
           <div class="iv2-pills"> .iv2-pill[.is-sale|.is-auction|.is-top] </div>
           <a class="iv2-collrow"><img class="iv2-coll-av">…<span
              class="iv2-collrow-ch">›</span></a>
           <div class="iv2-action">
             <div class="iv2-action-main"> price left · .iv2-cta right </div>
             <button class="iv2-qrow">…</button>  quiet 44px rows (also <a>)
           </div>
           <div id="ivTabs" role="tablist"> 4 × [role=tab] underline tabs </div>
           <div id="ivPanes"> .iv2-pane[hidden] × 4 </div>
           <div id="ivRelTokens" hidden></div>   RelTokens.loadInto mounts here
         </div>
       </div>
     </section>

   Skeletons are SHAPE-TRUE (same dims as the real nodes, shimmer sweep, no
   layout shift on fill); missing values stay dim-but-present (.st-miss /
   .is-unknown), never hidden, never zeroed — house rule.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0 · LOCAL TOKENS — the rarity-purple trio, per theme. Scoped to the view so
   nothing leaks; dark gets light-lavender ink so pills stay legible.
   ------------------------------------------------------------------------ */
#view-item {
  --iv2-rar-bg: rgba(139, 92, 246, .13);
  --iv2-rar-line: rgba(139, 92, 246, .44);
  --iv2-rar-ink: #6D28D9;
}
:root[data-theme="dark"] #view-item {
  --iv2-rar-bg: rgba(139, 92, 246, .22);
  --iv2-rar-line: rgba(167, 139, 250, .48);
  --iv2-rar-ink: #C9B8FF;
}

/* ---------------------------------------------------------------------------
   1 · VIEW WRAPPER + GRID — centered 1160 column, 32px gutters (16 on phones),
   2-col grid minmax(0,42%)/1fr with the big Getgems gutter.
   ------------------------------------------------------------------------ */
#view-item {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3.5vw, 32px) 90px;
}

.iv2-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  color: var(--ink-lo); font-size: 13px; font-weight: 600;
  text-decoration: none;
  /* the control ships as a <button> (#ivBack) — neutralise UA chrome so it
     reads as the quiet text link the contract describes */
  background: transparent; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
.iv2-back:hover { color: var(--ink-hi); }

.iv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr;
  gap: clamp(28px, 5.5vw, 64px);
  align-items: start;
}

/* founder correction #2 — the landing may NEVER bleed under the item page.
   Belt-and-braces: on data-tab="item" every home surface is force-hidden,
   whatever the view-switch JS got wrong. */
body[data-tab="item"] #gwLanding,
body[data-tab="item"] #view-home,
body[data-tab="item"] #homeShowcase,
body[data-tab="item"] #giftsGoats { display: none !important; }

/* ---------------------------------------------------------------------------
   2 · MEDIA PANEL (#ivMedia) — sticky square, radius 24, three layers:
   z0 backdrop fill · z1 media (static img OR looping lottie) · z2 chip buttons.
   The backdrop colour arrives from item data via inline style (either
   style="--iv2-backdrop:#hex" or a direct background) — absent, it falls back
   to the theme surface, never a fake colour.
   ------------------------------------------------------------------------ */
#ivMedia {
  position: sticky; top: 76px;
  align-self: start;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 24px; overflow: hidden;
  background: var(--well);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 18px 50px var(--shadow-card);
}
.iv2-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: var(--iv2-backdrop, var(--well));
}
.iv2-media {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 7%;
}
.iv2-media img,
.iv2-media video,
.iv2-media canvas,
.iv2-media svg,
.iv2-media .iv2-lottie {
  width: 100%; height: 100%;
  object-fit: contain;
}
/* lottie-web injects its own <svg> with inline dims — pin it to the box */
.iv2-media .iv2-lottie svg { width: 100% !important; height: 100% !important; }

/* overlay chips — 32px translucent circles top-right (share / … venue).
   They sit on ART, so they keep a dark glass look in both themes. */
.iv2-chips {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; gap: 8px;
}
.iv2-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(8, 8, 14, .46);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff; font-size: 14px; line-height: 1;
  text-decoration: none; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .14s ease, transform .14s ease;
}
.iv2-chip:hover { background: rgba(8, 8, 14, .66); transform: translateY(-1px); }

/* shape-true media skeleton — fills the square while art loads */
.iv2-skel-media { position: absolute; inset: 0; z-index: 1; border-radius: 0; }

/* ---------------------------------------------------------------------------
   3 · RAIL (#ivRail) — title, pills, collection row, action card, tabs, panes.
   ------------------------------------------------------------------------ */
#ivRail {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}

.iv2-title {
  margin: 0;
  color: var(--ink-hi);
  font-size: 32px; font-weight: 700;
  line-height: 1.12; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* status pills — grey base; the accent/auction/rarity variants recolour it */
.iv2-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.iv2-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--well);
  border: 1px solid var(--hairline-2);
  color: var(--ink-mid);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.iv2-pill.is-sale {
  background: color-mix(in srgb, var(--p400) 11%, transparent);
  border-color: color-mix(in srgb, var(--p400) 45%, transparent);
  color: var(--p600);
}
.iv2-pill.is-auction {
  background: color-mix(in srgb, var(--sweep) 11%, transparent);
  border-color: color-mix(in srgb, var(--sweep) 50%, transparent);
  color: var(--sweep);
}
/* "top X%" rarity chip — the reserved purple */
.iv2-pill.is-top {
  background: var(--iv2-rar-bg);
  border-color: var(--iv2-rar-line);
  color: var(--iv2-rar-ink);
}

/* collection link row — 20px avatar + name + chevron, name hovers accent */
.iv2-collrow {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  color: var(--ink-mid); font-size: 14px; font-weight: 600;
  text-decoration: none;
  min-width: 0; max-width: 100%;
}
.iv2-coll-av {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 6px; object-fit: cover;
  background: var(--well); border: 1px solid var(--hairline);
}
.iv2-collrow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv2-collrow-ch { color: var(--ink-faint); font-size: 12px; flex: 0 0 auto; }
.iv2-collrow:hover .iv2-collrow-name { color: var(--p600); }

/* ---------------------------------------------------------------------------
   4 · ACTION CARD — surface, radius 12, min-height-72 main row (price left,
   accent CTA pill right), then quiet 44px rows stacked under a hairline.
   ------------------------------------------------------------------------ */
.iv2-action {
  background: var(--panel);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--tint-weak) inset;
}
.iv2-action-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 72px; padding: 14px 16px;
}
.iv2-price-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv2-price-row { display: flex; align-items: baseline; gap: 8px; }
.iv2-gem { align-self: center; color: var(--p400); font-size: 18px; line-height: 1; }
.iv2-price {
  color: var(--ink-hi);
  font-size: 28px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.iv2-price-cur { color: var(--ink-lo); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.iv2-usd { color: var(--ink-lo); font-size: 13px; font-variant-numeric: tabular-nums; }
/* honest unlisted line — "last sale N" / "not listed", never a fake price */
.iv2-unlisted { color: var(--ink-mid); font-size: 14px; font-weight: 600; }
.iv2-unlisted .iv2-lastk {
  color: var(--ink-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; margin-right: 4px;
}

/* the one accent CTA — Buy / View on venue / Make Offer */
.iv2-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--p300); color: var(--on-accent);
  font-size: 14px; font-weight: 800; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: filter .14s ease, transform .14s ease;
}
.iv2-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.iv2-cta:disabled { opacity: .55; cursor: default; transform: none; }

/* outbound marker — appended ↗ on venue/TG links */
.iv2-ext-mark { font-size: 12px; line-height: 1; opacity: .85; }

/* quiet 44px action rows — Ask seller / Add to cart / View in Telegram.
   Works as <button> or <a>, inside the action card or standalone. */
.iv2-qrow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 16px;
  background: transparent; border: 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-mid); font-size: 13.5px; font-weight: 600;
  text-decoration: none; text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.iv2-qrow:hover { background: var(--hover); color: var(--ink-hi); }
.iv2-qrow-ic { width: 18px; flex: 0 0 auto; text-align: center; color: var(--ink-lo); font-size: 14px; }
.iv2-qrow .iv2-ext-mark { margin-left: auto; color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   5 · TABS (#ivTabs) — Getgems underline grammar: 14px/600 labels riding a
   full-width hairline; active = high-ink label + 2px high-ink underline
   ("white" in dark, deep plum in wtf — the honest cross-theme mapping).
   ------------------------------------------------------------------------ */
#ivTabs {
  display: flex; gap: 2px; margin-top: 4px;
  border-bottom: 1px solid var(--hairline-2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#ivTabs::-webkit-scrollbar { display: none; }
#ivTabs [role="tab"],
#ivTabs .iv2-tab {
  flex: 0 0 auto;
  padding: 11px 16px; margin-bottom: -1px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-lo); font-size: 14px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: color .12s ease;
}
#ivTabs [role="tab"]:hover,
#ivTabs .iv2-tab:hover { color: var(--ink-hi); }
#ivTabs [role="tab"][aria-selected="true"],
#ivTabs .iv2-tab[aria-selected="true"] {
  color: var(--ink-hi);
  border-bottom-color: var(--ink-hi);
}

/* ---------------------------------------------------------------------------
   6 · PANES (#ivPanes) — one .iv2-pane per tab; only the pane swaps, the rail
   above never moves. market.css's global [hidden] guard does the toggling.
   ------------------------------------------------------------------------ */
#ivPanes { padding-top: 18px; }
.iv2-pane { display: flex; flex-direction: column; gap: 18px; }

/* pane section headers — the house 13/800 uppercase mini-head (iv-dt-h twin) */
.iv2-sec-h {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-hi); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}

/* honest empty state — dashed, dim, present */
.iv2-empty {
  padding: 14px 16px; text-align: center;
  background: var(--panel);
  border: 1px dashed var(--hairline-2); border-radius: 12px;
  color: var(--ink-lo); font-size: 12.5px; line-height: 1.5;
}

/* missing values render dim-but-present, never hidden, never zero */
#view-item .st-miss,
#view-item .is-unknown { color: var(--ink-faint); font-weight: 400; }

/* --- 6a · DETAILS pane ---------------------------------------------------- */
/* Est.price row — only rendered when a real estimate exists (JS omits it) */
.iv2-est {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 12px;
}
.iv2-est-k {
  color: var(--ink-lo); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.iv2-est-v {
  color: var(--ink-hi); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* attribute cards — 2-col grid of outlined <a> cards: trait type 12px accent,
   value 14px, purple rarity pill. Links back to the collection. */
.iv2-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.iv2-attr {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; min-width: 0;
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 12px;
  text-decoration: none;
  transition: border-color .13s ease, background .13s ease;
}
.iv2-attr:hover { border-color: var(--hairline-2); background: var(--hover); }
.iv2-attr-t { color: var(--p600); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.iv2-attr-v {
  color: var(--ink-hi); font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iv2-attr-f { color: var(--ink-lo); font-size: 11px; font-variant-numeric: tabular-nums; }
/* the purple rarity pill — bottom-left, only when rarity % is real */
.iv2-rarity {
  align-self: flex-start; margin-top: 3px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--iv2-rar-bg);
  border: 1px solid var(--iv2-rar-line);
  color: var(--iv2-rar-ink);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* templated description — clauses only for traits that exist */
.iv2-desc { margin: 0; color: var(--ink-mid); font-size: 13.5px; line-height: 1.55; }

/* owner row — avatar + middle-truncated address */
.iv2-owner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 12px;
}
.iv2-owner-av {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  background: var(--well); border: 1px solid var(--hairline);
}
.iv2-owner-k {
  color: var(--ink-lo); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.iv2-owner-a {
  color: var(--ink-mid); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 6b · OFFERS pane ----------------------------------------------------- */
/* the reused iv-offer / iv-ob-* builders open with their own top hairline —
   redundant at the top of a fresh pane, so relax the first block's seam. */
#ivPanes .iv2-pane > .iv-offer:first-child,
#ivPanes .iv2-pane > .iv-ob:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- 6c · HOLDER MAP pane ------------------------------------------------- */
/* mountHolderMap reuses the .cvmap-frame markup (styled in market.css);
   bound its height here so the map is a strong header, not the whole pane. */
#ivPanes .cvmap-frame { aspect-ratio: auto; height: clamp(320px, 42vh, 440px); }
/* the B/W Intel Maps launcher (.im-pop, styled in market.css) rides below */
#ivPanes .im-pop { align-self: flex-start; }
/* the honest "— via Intel Maps" caption under the frame */
.iv2-map-cap {
  color: var(--ink-lo); font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}

/* --- 6d · HISTORY pane ---------------------------------------------------- */
/* the reused iv-dt-* timeline, restyled to roomy 59px rows with centred
   event dots; prices stay bold-GRAM-over-grey-USD from market.css. */
#ivPanes .iv-dt { margin-top: 0; padding-top: 0; border-top: 0; }
#ivPanes .iv-dt-tl { max-height: 480px; }
#ivPanes .iv-dt-ev { min-height: 59px; align-items: center; gap: 12px; padding: 8px 4px; }
#ivPanes .iv-dt-dot { width: 10px; height: 10px; margin-top: 0; }

/* ---------------------------------------------------------------------------
   7 · RELATED TOKENS MOUNT (#ivRelTokens) — reltokens.js loadInto() renders
   its own boxed window (reltokens.css owns the card); this is just the rail
   slot: spacing, and gone-until-real-data (the [hidden] contract + :empty).
   ------------------------------------------------------------------------ */
#ivRelTokens { margin-top: 12px; }
#ivRelTokens:empty { display: none; }

/* ---------------------------------------------------------------------------
   8 · SKELETONS — shape-true shimmer placeholders. Same dims as the real
   nodes so the fill causes zero layout shift. Composable: any .iv2-skel is a
   shimmering block; the size classes shape it.
   ------------------------------------------------------------------------ */
.iv2-skel {
  position: relative; overflow: hidden;
  background: var(--well);
  border-radius: 8px;
}
.iv2-skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, var(--hover) 50%, transparent 68%);
  background-size: 200% 100%;
  animation: iv2-shimmer 1.3s linear infinite;
}
@keyframes iv2-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -70% 0; }
}

.iv2-skel-title { height: 34px; width: 72%; }
.iv2-skel-line  { height: 14px; width: 100%; }
.iv2-skel-line.is-short { width: 46%; }
/* action-card-shaped block */
.iv2-skel-action { height: 72px; border-radius: 12px; }
/* attribute-card-shaped block (drop 4-6 into .iv2-attrs) */
.iv2-skel-attr { height: 82px; border-radius: 12px; }
/* offer/history row skeleton: avatar circle + two bars, stack ×5 */
.iv2-skel-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 59px; padding: 8px 4px;
}
.iv2-skel-av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; }
.iv2-skel-bars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.iv2-skel-bars .iv2-skel-line { height: 12px; }
.iv2-skel-bars .iv2-skel-line.is-short { width: 38%; }

/* ---------------------------------------------------------------------------
   9 · NAV PROGRESS — owned entirely by market.js navProgress(), which
   self-injects its #navProgress <style> (CSP-safe pattern, works even when a
   stylesheet deploy lags the script) and drives width/opacity inline with the
   theme accent var(--p400). No rules here — a second contract in this file
   would silently lose to the later-injected <style> node.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   10 · RESPONSIVE — single column under 900px: media first (DOM order),
   NON-sticky, centred; type steps down; gutters tighten.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  #view-item { padding: 14px 16px 90px; }
  .iv2-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #ivMedia {
    position: static;
    width: 100%; max-width: 520px;
    margin: 0 auto;
    border-radius: 20px;
  }
  .iv2-title { font-size: 24px; }
  .iv2-price { font-size: 24px; }
  #ivTabs [role="tab"], #ivTabs .iv2-tab { padding: 12px 14px; }  /* >=44px tap */
}
@media (max-width: 360px) {
  .iv2-attrs { grid-template-columns: minmax(0, 1fr); }
  .iv2-action-main { flex-wrap: wrap; }
  .iv2-cta { width: 100%; }
}

/* ---------------------------------------------------------------------------
   11 · REDUCED MOTION — shimmer, chip lifts and the progress sweep are all
   decoration; kill them. The skeleton stays visible as a static block.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .iv2-skel::after { animation: none; }
  .iv2-chip, .iv2-cta, .iv2-qrow, .iv2-attr { transition: none; }
}