/* wgf-item-page.css - item-detail page cohesion layer (owner review 2026-07-03 item
   page unification). Homes the "About this item" band, the supply-panel value/quality
   additions, and the WoW Tools Adventure-Guide tile tweaks. Tokens only (never :root
   here); every colour is a var(--wgf-*). Fixed dimensions where they matter -> zero CLS. */

/* ── About this item band (woven directly under the identity header) ── */
.wgf-about{
  background:var(--wgf-well);
  border:1px solid var(--wgf-metal-soft);
  border-left:3px solid var(--wgf-gold-muted);
  border-radius:4px;
  padding:var(--space-4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),var(--shadow-1);
}
/* ── Section plates on item pages: squared in-game plate, not rounded web cards ── */
.wgf-item .wgf-section{
  border-radius:4px;
  background:var(--wgf-well);
  border:1px solid var(--wgf-metal-soft);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),var(--shadow-1);
}
.wgf-about__h{margin-top:0;}
.wgf-about__intro{
  font-family:var(--font-ui);
  font-size:var(--text-md);
  color:var(--wgf-text);
  line-height:1.55;
  margin:0 0 var(--space-2);
}
.wgf-about__price{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  line-height:1.55;
  margin:0 0 var(--space-3);
}
.wgf-about__price .wgf-price{vertical-align:baseline;}
.wgf-about__pct{
  font-family:var(--font-game);
  font-variant:small-caps;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}
.wgf-about__pct--is-deal,.wgf-about__pct--down{color:var(--wgf-up);}
.wgf-about__pct--is-high,.wgf-about__pct--up{color:var(--wgf-down);}
.wgf-about__pct--flat{color:var(--wgf-muted);}

/* era + identity facts row */
.wgf-about__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-4);
  margin:0 0 var(--space-3);
}
.wgf-about__fact{display:flex;flex-direction:column;gap:1px;}
.wgf-about__fact dt{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wgf-muted);
  margin:0;
}
.wgf-about__fact dd{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);
  color:var(--wgf-text);
  margin:0;
}

/* recent-changes preview (anchors down to the full Data Changes list) */
.wgf-about__changes{
  margin-top:var(--space-2);
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
}
.wgf-about__sub{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--wgf-gold-muted);
  margin:0 0 var(--space-2);
}
.wgf-about__changelist{
  list-style:none;
  margin:0 0 var(--space-2);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}
.wgf-about__changelist li{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  line-height:1.5;
}
.wgf-about__patch{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}
.wgf-about__changelist .wgf-ichg__old{color:var(--wgf-muted);text-decoration:line-through;}
.wgf-about__changelist .wgf-ichg__new{color:var(--wgf-text);}
.wgf-about__more{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-gold-bright);
  text-decoration:none;
}
.wgf-about__more:hover,.wgf-about__more:focus-visible{text-decoration:underline;}

/* ── Supply panel additions (value coin stat + meta) ── */
.sp__stat-val--coin{font-size:var(--text-md);}
.sp__stat-val--coin .wgf-price__scope{display:none;}
/* The .sp__bar / .sp__bar-fill percentage pill bar is RETIRED (owner law
   2026-07-03: no percentage-fill stat bars; slop-audit-2026-07-04 Lane 5).
   Depth reads from the squared .sp__depth-badge plate + the real listing
   counts in .sp__stats; the emitter's bar markup renders nothing until its
   own retirement patch lands (item_pages_app.py). No pill styling may
   return here - the wave0 doctrine ratchet locks this. */
.sp__bar,.sp__bar-fill{display:none;}
.sp__meta{
  margin:var(--space-3) 0 0;
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}

/* ── WoW Tools cards (Adventure-Guide tiles reused; tool-content tweaks) ── */
.wgf-ag-grid--tools{margin-top:var(--space-3);}
.wgf-ag-card--tool .wgf-ag-card__text{display:flex;flex-direction:column;gap:2px;}
.wgf-ag-card--tool .wgf-ag-card__meta{white-space:normal;line-height:1.35;}
/* item-specific deals plates get the gold edge accent so they lead the grid */
.wgf-ag-card--tool-primary{border-left:3px solid var(--wgf-gold-muted);}
/* ── Related-item/tool tiles on item pages: squared plate rows, no floating rounded cards ── */
.wgf-item .wgf-ag-card{
  border-radius:4px;
  border-color:var(--wgf-metal-soft);
}
.wgf-item .wgf-ag-card:hover,
.wgf-item .wgf-ag-card:focus-visible{
  border-color:var(--wgf-gold-muted);
  transform:none;
}

/* ════════════════════════════════════════════════════════════════════════════
   ITEM-PAGE KIT RE-CUT (owner re-cut 2026-07-04, docs/ui-ux/13-ingame-reference
   sec 0.4/0.5). Page-scoped only (.wgf-item is the item-page layout root); tokens
   only, no raw values a token covers. Fixed dimensions -> zero CLS.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── (item 1) Hero = the first-party tooltip rendered LARGE ─────────────────────
   The identity block already consumes the SSR tooltip twin (render_tooltip_card ->
   .wgf-it--inline, styled in wgf-item-tooltip.css). Here we only scale it up as the
   page hero and let the price column sit beside it. No fork of the tooltip. */
.wgf-item .iih__main--tooltip{flex:1 1 340px;min-width:0;}
.wgf-item .iih__main--tooltip .wgf-it--inline{
  width:100%;
  max-width:none;
}
.wgf-item .iih__main--tooltip .wgf-it__name{font-size:var(--text-xl);}
.wgf-item .iih__main--tooltip .wgf-it__icon{width:52px;height:52px;}

/* ── (item 3) ONE delta idiom: small well chips, single format ─────────────────
   Replaces the old stacked deal-score badge + separate window pill. Every delta
   reads as a .idelta__chip in the ONE wgf_typical.pct_chip wording. */
.idelta{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  justify-content:flex-end;
}
.idelta__chip{
  display:inline;
  font-family:var(--font-game);
  font-variant:small-caps;
  font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
  color:var(--wgf-muted);
  text-shadow:var(--text-ink-outline);
}
/* deal verdict colours (cheaper = good/green, dearer = red) - semantic, not art */
.idelta__chip--is-deal,.idelta__chip--down{color:var(--wgf-up);}
.idelta__chip--is-high,.idelta__chip--up{color:var(--wgf-down);}
.idelta__chip--flat{color:var(--wgf-muted);}

/* price-meta row (typical substat + delta chips + watch), right-aligned */
.iih__price-meta{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  justify-content:flex-end;
}
.iih__seechart{color:var(--wgf-muted);font-family:var(--font-mono);}

/* ── (item 2) Sourced nature: honest "no market" price state ────────────────── */
.iih__price-col--nomarket{text-align:right;}
.iih__nomarket{
  font-family:var(--font-game);
  font-size:var(--text-md);
  font-weight:700;
  color:var(--wgf-gold-muted);
}
.iih__nomarket-sub{
  margin:var(--space-1) 0 0;
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  line-height:1.4;
}
/* the sourced page leads with source: give its source blocks a touch more presence */
.wgf-item--sourced .wgf-idrop,
.wgf-item--sourced .wgf-iquest,
.wgf-item--sourced .wgf-irec{border-left:3px solid var(--wgf-gold-muted);padding-left:var(--space-3);}

/* ── (item 6) Kit windows around supply + tools ───────────────────────────────
   The .wgf-window frame comes from wgf-chrome.css; here we only space it and let
   its inner sections drop their own redundant panel chrome (the window IS the
   frame now). */
.wgf-iwin{margin:var(--space-4) 0;}
.wgf-iwin > .wgf-window__body{padding:var(--space-4);}
.wgf-iwin .sp,
.wgf-iwin .wgf-section{
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

/* ── (item 5) Related items -> AH-results look (tooltip-surface rows) ───────────
   The rows already carry quality-coloured names + coin prices (item_card.render_row);
   here they wear the first-party item-tooltip plate (the AH result-row surface from
   ig-41), matching the AH browser. Additive - no fork of wgf-item-card.css. */
.wgf-seo-related-tiles{display:flex;flex-direction:column;gap:var(--space-2);}
.wgf-seo-related-tiles .wgf-item-row{
  background:linear-gradient(180deg, rgba(12,12,30,.97), rgba(5,5,16,.97));
  border:1px solid #7a7a96;
  border-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.30);
}
.wgf-seo-related-tiles .wgf-item-row:hover,
.wgf-seo-related-tiles .wgf-item-row:focus-within{
  background:linear-gradient(180deg, rgba(22,22,44,.97), rgba(8,8,22,.97));
  border-color:#9a9ab5;
}