/* wgf-spec-guides-enrich.css - the datamine blocks on /guides/classes/<class>/<spec>/<mode>/.
   Owner: spec_guide_enrich_render.py + the icon/tooltip cells in spec_build_render.py
   (lane enrich-guides, 2026-09-11). Palette tokens only; no colour literal. */

.wgf-sge-ico {
  display: inline-block;
  vertical-align: -5px;
  margin-right: 6px;
  border: 1px solid var(--wgf-metal);
  background: var(--wgf-well);
}

/* identity: spec icon + class crest beside Blizzard's description and the fixed facts */
.wgf-sge-id {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}
.wgf-sge-id__icons {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.wgf-sge-id__icons .wgf-sge-ico { margin: 0; vertical-align: bottom; }
.wgf-sge-id__text { flex: 1 1 320px; min-width: 0; }
.wgf-sge-desc {
  margin: 0 0 var(--space-3);
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--wgf-text);
}

/* spec spells */
.wgf-sge-cap { margin: 0 0 var(--space-3); font-size: 13px; color: var(--wgf-muted); }
.wgf-sge-spells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wgf-sge-spell {
  padding: var(--space-2) var(--space-3);
  background: var(--wgf-well);
  border: 1px solid var(--wgf-metal-soft);
  border-left: 2px solid var(--wgf-gold-dark);
}
.wgf-sge-spell__h { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.wgf-sge-spell__h a { text-decoration: none; }
.wgf-sge-spell__t { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--wgf-muted); }
.wgf-sge-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wgf-gold-muted);
  border: 1px solid var(--wgf-metal);
  padding: 0 5px;
}

/* tables: tooltip column + dungeon art cells, scroll instead of overflow on phones */
.wgf-sge-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.wgf-sge-tip { min-width: 16rem; font-size: 13px; line-height: 1.55; color: var(--wgf-muted); }
.wgf-sge-dg a,
.wgf-sge-dg { display: flex; align-items: center; gap: var(--space-2); }
.wgf-sge-tile {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--wgf-metal);
}