/* wgf-wow-token.css - page-only styling for /wow-token/ and its region pages.
 *
 * Scope: the blocks rendered by wow_token_render.py (item pane, source list, art
 * strip) plus the two places the token pages seat client art (hero ring, movement
 * log rows). Shared chrome stays in wgf-chrome.css / wow-token-dashboard.css; this
 * sheet never redefines a shared class, only nests inside .wtd-* containers.
 *
 * Palette: docs/ui-ux/17-blizzard-palette.md - slate #0d0f14 / #14161c panels,
 * bronze #6e5a2a and gold #b7912f rules, gold #ffd100, parchment #f4ecd8, muted
 * #9d9d9d. No green chrome, no gradients, no glows.
 */

/* Both blocks ride .wgf-section (wgf-site-shell.css) for the client window frame and
   its heading band - this rule only names the palette their innards read, so nothing
   here fights the shared recipe. */
.wtd-item-panel,
.wtd-sources-panel {
  --wtd-plate: #14161c;
  --wtd-bronze: #6e5a2a;
  --wtd-gold: #b7912f;
  --wtd-gold-lit: #ffd100;
  --wtd-ink: #f4ecd8;
  --wtd-muted: #9d9d9d;
}

.wtd-block-lede {
  margin: 6px 0 14px;
  color: var(--wtd-muted);
  font-size: 14px;
}

/* ── The item pane ─────────────────────────────────────────────────────────── */

.wtd-item-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wtd-item-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--wtd-plate);
  border: 1px solid var(--wtd-bronze);
}

.wtd-item-body { min-width: 0; }

.wtd-item-name {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  font-family: FrizQT, "Trajan Pro", Georgia, serif;
}

.wtd-item-name:hover,
.wtd-item-name:focus { text-decoration: underline; }

.wtd-item-role {
  margin: 2px 0 0;
  color: var(--wtd-gold-lit);
  font-size: 13px;
}

.wtd-item-quote {
  margin: 8px 0 0;
  color: var(--wtd-ink);
  font-size: 13px;
  line-height: 1.45;
}

.wtd-item-facts {
  display: grid;
  gap: 2px 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--wtd-bronze);
  font-size: 12px;
}

.wtd-item-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.wtd-item-facts dt { color: var(--wtd-muted); }
.wtd-item-facts dd { margin: 0; color: var(--wtd-ink); }

/* ── Source list ───────────────────────────────────────────────────────────── */

.wtd-source-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.wtd-source-list > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--wtd-plate);
  border: 1px solid var(--wtd-bronze);
}

.wtd-source-list strong {
  display: block;
  color: var(--wtd-gold-lit);
  font-family: FrizQT, "Trajan Pro", Georgia, serif;
  font-size: 14px;
}

.wtd-source-list p {
  margin: 3px 0 0;
  color: var(--wtd-ink);
  font-size: 13px;
  line-height: 1.45;
}

.wtd-source-list a { color: var(--wtd-gold-lit); }

/* ── Header art strip (hub only) ───────────────────────────────────────────── */

.wtd-art-strip {
  margin: 0 0 18px;
  border: 1px solid #6e5a2a;
  background: #0d0f14;
}

.wtd-art-strip img {
  display: block;
  width: 100%;
  height: clamp(110px, 18vw, 190px);
  object-fit: cover;
  object-position: 50% 42%;
}

.wtd-art-strip figcaption {
  padding: 6px 10px;
  border-top: 1px solid #6e5a2a;
  color: #9d9d9d;
  font-size: 12px;
}

/* ── Hero icon: the 44px AH ring scaled to the hero's 56px seat ────────────── */

.wtd-token-icon .wgf-qborder { width: 56px; height: 56px; }
.wtd-token-icon .wgf-qborder__icon { width: 42px; height: 42px; }