/* wgf-infinite-knowledge.css - the /infinite-knowledge spellbook skin.
 *
 * Reads like the in-game Classic spellbook on top of the site's Blizzard
 * palette (static/css/_tokens.css): near-black slate surfaces, gold brand
 * ramp, quality-ring icon frames. No new colors are invented; every value
 * either comes from a --wgf-* token (with a hex fallback so a token-less
 * preview still renders sanely) or is a neutral alpha of the site chrome.
 * Vanilla CSS only, no frameworks (project law).
 */

.ik-book,
.ik-spell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ---------------------------------------------------------------- intro */

.ik-intro {
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.38);
  border-radius: 10px;
  padding: 22px 22px 18px;
  margin-bottom: 16px;
}

.ik-title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  color: var(--wgf-gold-primary, #ffd100);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

.ik-lead {
  margin: 0 0 10px;
  color: var(--wgf-gold-soft, #e8d48a);
  font-size: 16.5px;
  line-height: 1.55;
}

.ik-note {
  margin: 0;
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- tabs */

.ik-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 22px;
}

.ik-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--wgf-panel-2, #1e2025);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 7px;
  color: var(--wgf-gold-link, #e6c34d);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ik-tab:hover,
.ik-tab:focus-visible {
  border-color: rgba(255, 209, 0, 0.38);
  background: var(--wgf-panel-3, #26282e);
}

/* ------------------------------------------------------- glance index */

.ik-glance-title {
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 21px;
  margin: 6px 0 10px;
}

.ik-glance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
  align-items: start;
}

.ik-glance-school {
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 9px;
  padding: 12px 14px 8px;
}

.ik-glance-school-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 209, 0, 0.38);
}

.ik-glance-school-head .wgf-qborder { flex: 0 0 auto; }

.ik-glance-school-name {
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 15.5px;
  font-weight: 700;
}

.ik-glance-count {
  margin-left: auto;
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 12px;
  font-weight: 400;
}

.ik-glance-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ik-glance-row:last-child { border-bottom: none; }
.ik-glance-row:hover { background: rgba(255, 209, 0, 0.05); }

.ik-glance-spell {
  flex: 0 0 auto;
  color: var(--wgf-gold-soft, #e8d48a);
  font-size: 13.5px;
}

.ik-glance-sep {
  flex: 0 0 auto;
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 13px;
}

.ik-glance-skill {
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ik-glance-row:hover .ik-glance-skill {
  color: var(--wgf-gold-hover, #ffd83d);
}

/* --------------------------------------------------------- schools */

.ik-school {
  margin-bottom: 30px;
}

.ik-school-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 23px;
  margin: 0 0 6px;
}

.ik-school-lore {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 14px;
  margin: 0 0 14px;
  font-style: italic;
}

.ik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

/* ------------------------------------------------------------ rings */
/* Size co-classes on .wgf-qborder (assets/wgf-chrome.css owns the frame art
 * itself - the client's real auctionhouse-itemicon-border-*.png rings; these
 * only resize it, the talents.css pattern). Spell icons sit in the blue
 * (rare) ring; class crests in the artifact ring.
 */
.ik-qb--lg { width: 64px; height: 64px; }
.ik-qb--lg > img { width: 46px; height: 46px; }
.ik-qb--md { width: 56px; height: 56px; }
.ik-qb--md > img { width: 40px; height: 40px; }
.ik-qb--sm { width: 36px; height: 36px; }
.ik-qb--sm > img { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- cards */

.ik-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 9px;
  text-decoration: none;
}

.ik-card:hover,
.ik-card:focus-visible {
  border-color: rgba(255, 209, 0, 0.38);
  background: var(--wgf-panel-2, #1e2025);
}

.ik-card .wgf-qborder { flex: 0 0 auto; }

.ik-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ik-card-name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.ik-card-spell {
  color: var(--wgf-gold-soft, #e8d48a);
  font-size: 12.5px;
}

.ik-card-ranks {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 12px;
}

/* ------------------------------------------------------- spell page */

.ik-spell-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ik-spell-head .wgf-qborder { flex: 0 0 auto; margin-top: 6px; }

/* the in-game tooltip look */
.ik-tooltip {
  flex: 1 1 420px;
  background: rgba(10, 11, 13, 0.92);
  border: 1px solid rgba(255, 209, 0, 0.38);
  border-radius: 9px;
  padding: 14px 18px 12px;
  text-align: center;
}

.ik-tooltip-class {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.ik-tooltip-name {
  margin: 4px 0 2px;
  font-size: 26px;
  line-height: 1.1;
  color: var(--wgf-gold-primary, #ffd100);
}

.ik-tooltip-rank {
  color: #fff;
  font-size: 13px;
  margin-bottom: 8px;
}

.ik-tooltip-stats {
  border-top: 1px solid rgba(255, 209, 0, 0.2);
  border-bottom: 1px solid rgba(255, 209, 0, 0.2);
  padding: 7px 0;
  margin-bottom: 8px;
}

.ik-stat {
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}

.ik-stat-k { color: var(--wgf-muted-text, #b9bac0); }

.ik-tooltip-desc {
  margin: 0;
  color: var(--wgf-gold-soft, #e8d48a);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
}

.ik-wears {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.ik-wears b { color: var(--wgf-gold-link, #e6c34d); }

/* ------------------------------------------------------------- ranks */

.ik-ranks-title {
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 21px;
  margin: 0 0 12px;
}

.ik-rank {
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ik-rank-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.ik-rank-head .wgf-qborder { flex: 0 0 auto; }

.ik-rank-badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 209, 0, 0.12);
  border: 1px solid rgba(255, 209, 0, 0.38);
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ik-rank-title {
  margin: 0;
  font-size: 17.5px;
  color: #fff;
}

.ik-rank-text {
  margin: 0;
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 15px;
  line-height: 1.6;
}

/* ----------------------------------------------------------- related */

.ik-related-title {
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 19px;
  margin: 22px 0 10px;
}

.ik-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ik-rel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: var(--wgf-panel-2, #1e2025);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 7px;
  color: var(--wgf-gold-link, #e6c34d);
  font-size: 13.5px;
  text-decoration: none;
}

.ik-rel:hover { border-color: rgba(255, 209, 0, 0.38); }
.ik-rel .wgf-qborder { flex: 0 0 auto; }

/* ------------------------------------------------------------ law */

.ik-law {
  margin-top: 26px;
  padding: 12px 16px;
  border: 1px dashed rgba(255, 209, 0, 0.38);
  border-radius: 9px;
  color: var(--wgf-gold-soft, #e8d48a);
  font-size: 13.5px;
  font-style: italic;
  text-align: center;
}

.ik-law-spell { margin-top: 20px; }

/* ------------------------------------------------------- hub banner */

.ik-hub-banner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 20px;
  padding: 15px 18px;
  background: rgba(255, 209, 0, 0.07);
  border: 1px solid rgba(255, 209, 0, 0.38);
  border-radius: 10px;
  text-decoration: none;
}

.ik-hub-banner:hover { border-color: rgba(255, 209, 0, 0.6); }

.ik-hub-banner-kicker {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.ik-hub-banner-title {
  color: var(--wgf-gold-primary, #ffd100);
  font-size: 20px;
  font-weight: 700;
}

.ik-hub-banner-note {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ------------------------------------------------------ incantation */

.ik-incantation {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--wgf-well, #101114);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-left: 3px solid rgba(255, 209, 0, 0.38);
  border-radius: 7px;
  overflow-x: auto;
}

.ik-incantation code {
  font-family: ui-monospace, Consolas, "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #f4ecd8;
  white-space: pre;
}

/* ------------------------------------------------------ lang cards */

.ik-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ik-lang-card {
  display: block;
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 9px;
  padding: 14px 16px;
  text-decoration: none;
}

.ik-lang-card:hover,
.ik-lang-card:focus-visible {
  border-color: rgba(255, 209, 0, 0.38);
  background: var(--wgf-panel-2, #1e2025);
}

.ik-lang-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ik-lang-head .wgf-qborder { flex: 0 0 auto; }

.ik-lang-name {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.ik-lang-spell {
  margin: 0 0 8px;
  color: var(--wgf-gold-soft, #e8d48a);
  font-size: 13px;
  font-style: italic;
}

.ik-lang-spell b { color: var(--wgf-gold-primary, #ffd100); font-style: normal; }

.ik-lang-line {
  margin: 0 0 7px;
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 13.5px;
  line-height: 1.5;
}

.ik-lang-line:last-child { margin-bottom: 0; }
.ik-lang-line b { color: var(--wgf-gold-link, #e6c34d); }

.ik-lang-more {
  margin: 9px 0 0;
  color: var(--wgf-gold-link, #e6c34d);
  font-size: 12.5px;
  letter-spacing: 0.4px;
}

.ik-lang-card:hover .ik-lang-more { color: var(--wgf-gold-hover, #ffd83d); }

/* --------------------------------------------------------- ethic */

.ik-ethic {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.ik-ethic-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  background: var(--wgf-panel-1, #17181c);
  border: 1px solid rgba(255, 209, 0, 0.2);
  border-radius: 9px;
}

.ik-ethic-row b { color: var(--wgf-gold-primary, #ffd100); font-size: 14.5px; }
.ik-ethic-row span {
  color: var(--wgf-muted-text, #b9bac0);
  font-size: 13.5px;
  line-height: 1.5;
}

.ik-honorable { margin: 6px 0 22px; line-height: 1.6; }

/* --------------------------------------------------------- responsive */

@media (max-width: 560px) {
  .ik-title { font-size: 24px; }
  .ik-tooltip-name { font-size: 21px; }
  .ik-grid { grid-template-columns: 1fr 1fr; }
  .ik-qb--md { width: 48px; height: 48px; }
  .ik-qb--md > img { width: 34px; height: 34px; }
  .ik-spell-head { gap: 12px; }
}