/* wgf-item-dossier.css - the /item/ page's game-data dossier (lane enrich-item, 2026-09-11).
   Markup: item_dossier_render.py - the "<name> Game Data" kit window (.wgf-idos): Crafted By
   recipe cards, the Used In table, Teaches, Profession Recipe, Quality Ranks, Appearance,
   Achievements, Requirements & Properties.

   Tokens only (static/css/_tokens.css): no green chrome, no gradient, no glow, no painted
   texture (docs/ui-ux/17-blizzard-palette.md). Item-name colours come only from --q-*.
   Every image has fixed width/height attributes -> zero CLS. Tables become stacked cards
   under 640px (docs/ui-ux/02-components.md section 10: never a squeezed table). */

/* ── shared bits ───────────────────────────────────────────────────── */
.wgf-idos-icon{
  width:20px;
  height:20px;
  vertical-align:middle;
  margin-right:6px;
  border:1px solid var(--wgf-metal-soft);
  border-radius:2px;
  background:var(--wgf-well);
}
.wgf-idos-item{text-decoration:none;}
.wgf-idos-item:hover,
.wgf-idos-item:focus-visible{text-decoration:underline;}
.wgf-idos-item.q-poor{color:var(--q-poor);}
.wgf-idos-item.q-common{color:var(--q-common);}
.wgf-idos-item.q-uncommon{color:var(--q-uncommon);}
.wgf-idos-item.q-rare{color:var(--q-rare);}
.wgf-idos-item.q-epic{color:var(--q-epic);}
.wgf-idos-item.q-legendary{color:var(--q-legendary);}
.wgf-idos-item.q-artifact{color:var(--q-artifact);}
.wgf-idos-item.q-heirloom{color:var(--q-heirloom);}
.wgf-idos-unnamed{color:var(--wgf-muted);}
.wgf-idos-note{
  margin-left:6px;
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}
.wgf-idos-sum{
  margin:var(--space-2) 0;
  line-height:1.55;
  color:var(--wgf-text);
}
.wgf-idos-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ── recipe card (Crafted by / Teaches) ───────────────────────────── */
.wgf-idos-recipe{
  margin:0 0 var(--space-2);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--wgf-metal-soft);
  border-radius:var(--radius-card);
  background:var(--wgf-well);
}
.wgf-idos-recipe__head{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-1) var(--space-3);
}
.wgf-idos-recipe__name{
  font-family:var(--font-game);
  font-size:var(--text-md);
  color:var(--wgf-gold-primary);
}
.wgf-idos-recipe__meta{
  font-size:var(--text-sm);
  color:var(--wgf-muted);
}
.wgf-idos-recipe__makes{margin:var(--space-1) 0 0;}
.wgf-idos-reagents{
  list-style:none;
  margin:var(--space-2) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--space-1) var(--space-3);
}
.wgf-idos-reagent{
  display:flex;
  align-items:center;
  min-width:0;
}
.wgf-idos-qty{
  flex:0 0 auto;
  min-width:2.6em;
  margin-right:6px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--wgf-gold-primary);
}

/* ── used-in table ─────────────────────────────────────────────────── */
.wgf-idos-tablewrap{overflow-x:auto;}
.wgf-idos-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
}
.wgf-idos-table th{
  padding:6px 8px;
  text-align:left;
  font-weight:600;
  font-size:var(--text-xs);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--wgf-muted);
  border-bottom:1px solid var(--wgf-metal-soft);
}
.wgf-idos-table th.wgf-idos-num{text-align:right;}
.wgf-idos-table td{
  padding:6px 8px;
  vertical-align:middle;
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.wgf-idos-desc{
  display:block;
  margin-top:2px;
  font-size:var(--text-xs);
  line-height:1.45;
  color:var(--wgf-muted);
}

/* ── Game Data window blocks ──────────────────────────────────────── */
.wgf-idos-block + .wgf-idos-block{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
}
.wgf-idos-h{margin-top:0;}
.wgf-idos-list{
  margin:var(--space-2) 0 0;
  padding-left:1.1rem;
  line-height:1.55;
}
.wgf-idos-list li + li{margin-top:4px;}
.wgf-idos-ranks,
.wgf-idos-sibs{
  list-style:none;
  margin:var(--space-2) 0 0;
  padding:0;
}
.wgf-idos-ranks{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.wgf-idos-rank{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px var(--space-2);
  border:1px solid var(--wgf-metal-soft);
  border-radius:var(--radius-control);
  background:var(--wgf-well);
}
.wgf-idos-rank.is-current{border-color:var(--wgf-gold-muted);}
.wgf-idos-pip{width:20px;height:20px;}
.wgf-idos-sibs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:6px var(--space-3);
}
.wgf-idos-sibs li{min-width:0;}
.wgf-idos-facts{
  margin:var(--space-2) 0 0;
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px var(--space-3);
}
.wgf-idos-fact{display:contents;}
.wgf-idos-facts dt{color:var(--wgf-muted);}
.wgf-idos-facts dd{margin:0;color:var(--wgf-text);}
.wgf-idos-src{
  margin:var(--space-3) 0 0;
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}

/* ── phone: the table becomes stacked cards ───────────────────────── */
@media (max-width:640px){
  .wgf-idos-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .wgf-idos-table,
  .wgf-idos-table tbody,
  .wgf-idos-table tr,
  .wgf-idos-table td{display:block;width:100%;}
  .wgf-idos-table tr{
    margin:0 0 var(--space-2);
    padding:var(--space-1) var(--space-2);
    border:1px solid var(--wgf-metal-soft);
    border-radius:var(--radius-control);
    background:var(--wgf-well);
  }
  .wgf-idos-table td{
    display:flex;
    justify-content:space-between;
    gap:var(--space-2);
    padding:4px 0;
    border-bottom:0;
    text-align:right;
  }
  .wgf-idos-table td::before{
    content:attr(data-th);
    color:var(--wgf-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.04em;
    text-align:left;
  }
  .wgf-idos-facts{grid-template-columns:1fr;}
  .wgf-idos-facts dd{margin-bottom:6px;}
}