/* wgf-classic-item-enrich.css - the enrichment blocks on the Classic item pages
 * (classic_item_enrich_render, wired from item_version_page_app). Scoped under .wgf-vitem,
 * so nothing here reaches another family. Linked through the module's extra_css seam, which
 * mtime-busts it (no manual ?v=).
 *
 * Palette: ONLY the in-game values wgf-classic-items.css already declares as --vi-* locals
 * (slate #0d0f14/#14161c, bronze/gold rules #6e5a2a/#b7912f, gold #ffd100, parchment
 * #f4ecd8, muted #9d9d9d; docs/ui-ux/17-blizzard-palette.md). Squared containers, no
 * gradients, no glows, no green chrome: Use/Equip lines take parchment like the page's
 * existing effect lines. */

/* ── the 1:1 tooltip lines inside the hero ─────────────────────────────────────── */
.wgf-vitem .wgf-cie-tt--ilvl { color: var(--vi-gold); }
.wgf-vitem .wgf-cie-tt--pair { display: flex; justify-content: space-between; gap: 1.2rem; }
.wgf-vitem .wgf-cie-tt__r { text-align: right; }
.wgf-vitem .wgf-cie-tt--effect { color: var(--vi-parchment); }
.wgf-vitem .wgf-cie-tt--quest { color: var(--vi-gold); }
.wgf-vitem .wgf-cie-tt--set { color: var(--vi-gold); margin-top: .35rem; }
.wgf-vitem .wgf-cie-tt--setpiece { color: var(--vi-muted); padding-left: .8rem; font-size: .86rem; }
.wgf-vitem .wgf-cie-tt--setbonus { color: var(--vi-muted); font-size: .86rem; }
.wgf-vitem .wgf-cie-tt--flavor { color: var(--vi-gold); font-style: italic; margin-top: .3rem; }

/* ── About paragraph (rides in the hero window under the tooltip) ──────────────── */
.wgf-vitem .wgf-cie-about { margin-top: .9rem; }
.wgf-vitem .wgf-cie-about .section-heading { margin: 0 0 .35rem; font-size: 1.05rem; }
.wgf-vitem .wgf-cie-about p { margin: 0; line-height: 1.6; color: var(--vi-parchment); max-width: 46rem; }

/* ── windows ───────────────────────────────────────────────────────────────────── */
.wgf-vitem .wgf-cie { margin-top: 1rem; }
.wgf-vitem .wgf-cie-ref { display: inline-flex; align-items: center; gap: .35rem; }
.wgf-vitem .wgf-cie .wgf-icon { width: 18px; height: 18px; border: 1px solid var(--vi-rule); vertical-align: middle; margin-right: .3rem; }
.wgf-vitem .wgf-cie-grid { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem .9rem; }
.wgf-vitem .wgf-cie-grid li { padding: .22rem .4rem; border-bottom: 1px solid var(--vi-rule); font-size: .9rem; }
.wgf-vitem .wgf-cie-grid li.is-self { outline: 1px solid var(--vi-rule-lit); }
.wgf-vitem .wgf-cie-grid a, .wgf-vitem .wgf-cie-list a { text-decoration: none; }
.wgf-vitem .wgf-cie-bonus, .wgf-vitem .wgf-cie-list { margin: .3rem 0 .6rem 1.1rem; padding: 0; line-height: 1.6; font-size: .9rem; }
.wgf-vitem .wgf-cie-bonus strong { color: var(--vi-gold); font-weight: 600; margin-right: .3rem; }
.wgf-vitem .wgf-cie-made { margin: .2rem 0; font-size: 1rem; }
.wgf-vitem .wgf-cie-flavor { color: var(--vi-gold); font-style: italic; margin: .2rem 0; font-size: .9rem; }
.wgf-vitem .wgf-cie-muted { color: var(--vi-muted); font-size: .86rem; margin: .2rem 0; }
.wgf-vitem .wgf-cie-qty { color: var(--vi-muted); font-variant-numeric: tabular-nums; }

/* ── Classic vs retail table: changed rows carry the lit rule, never a colour wash ── */
.wgf-vitem .wgf-cie-diff th[scope="row"] { color: var(--vi-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .88rem; }
.wgf-vitem .wgf-cie-diff tr.is-diff td { color: var(--vi-parchment); }
.wgf-vitem .wgf-cie-diff tr.is-diff th[scope="row"] { border-left: 2px solid var(--vi-rule-lit); padding-left: .45rem; }
.wgf-vitem .wgf-cie-diff tr:not(.is-diff) td { color: var(--vi-muted); }

/* ── scan history facts ────────────────────────────────────────────────────────── */
.wgf-vitem .wgf-cie-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem .9rem; margin: .2rem 0 .8rem; }
.wgf-vitem .wgf-cie-facts div { border: 1px solid var(--vi-rule); background: var(--vi-plate-2); padding: .45rem .6rem; }
.wgf-vitem .wgf-cie-facts dt { color: var(--vi-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.wgf-vitem .wgf-cie-facts dd { margin: .15rem 0 0; font-weight: 600; }
.wgf-vitem .wgf-cie-facts dd small { display: block; font-weight: 400; color: var(--vi-muted); font-size: .76rem; }

@media (max-width: 720px) {
  .wgf-vitem .wgf-cie-grid { grid-template-columns: 1fr; }
  .wgf-vitem .wgf-cie-tt--pair { gap: .6rem; }
}