/* M06 — Item Identity Header
   Single-homed canonical CSS (one file, one concern).
   Tokens: var(--wgf-*) from static/css/_tokens.css — never :root here.
   Brand gold: #f0c040 / var(--wgf-gold-primary) — not #f4c45c / 244,196,92. */

/* ── panel shell ── */
.iih{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  box-shadow:var(--shadow-2);
}

/* ── two-column layout: icon+meta on left, price on right ── */
.iih__body{
  display:flex;
  align-items:flex-start;
  gap:var(--space-4);
}

/* ── icon ── */
.iih__icon-wrap{
  flex:0 0 auto;
  position:relative;
}
.iih__icon{
  display:block;
  width:60px;
  height:60px;
  border-radius:var(--radius-control);
  object-fit:cover;
  /* quality-colored 2px ring via outline so it doesn't collapse the layout */
  outline:2px solid transparent;
  outline-offset:1px;
}
/* quality ring colors applied via modifier classes */
.iih__icon--poor     {outline-color:var(--q-poor);}
.iih__icon--common   {outline-color:var(--q-common);}
.iih__icon--uncommon {outline-color:var(--q-uncommon);}
.iih__icon--rare     {outline-color:var(--q-rare);}
.iih__icon--epic     {outline-color:var(--q-epic);}
.iih__icon--legendary{outline-color:var(--q-legendary);}
.iih__icon--heirloom {outline-color:var(--q-heirloom);}

/* ── left column: name + chips + meta ── */
.iih__main{
  flex:1 1 auto;
  min-width:0;
}

/* item name — the page <h1> */
.iih__name{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.2;
  margin:0 0 var(--space-2);
}
/* quality-colored names */
.iih__name--poor      {color:var(--q-poor);}
.iih__name--common    {color:var(--q-common);}
.iih__name--uncommon  {color:var(--q-uncommon);}
.iih__name--rare      {color:var(--q-rare);}
.iih__name--epic      {color:var(--q-epic);}
.iih__name--legendary {color:var(--q-legendary);}
.iih__name--heirloom  {color:var(--q-heirloom);}

/* chips row: taxonomy + relevance/state tags */
.iih__chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0 0 var(--space-2);
  padding:0;
  list-style:none;
}
.iih__chip{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  padding:2px var(--space-2);
  border-radius:var(--radius-pill);
  border:1px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-3);
  color:var(--wgf-muted);
  white-space:nowrap;
  line-height:1.4;
}
/* relevance/state tag (M52 slot) */
.iih__chip--relevance{
  color:var(--wgf-gold-muted);
  border-color:var(--wgf-border);
  background:color-mix(in srgb,var(--wgf-gold-accent) 12%,var(--wgf-panel-3));
}

/* meta line: dl-like muted key/value pairs */
.iih__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-1) var(--space-3);
  list-style:none;
  margin:0;
  padding:0;
  font-size:var(--text-sm);
  color:var(--wgf-muted);
}
.iih__meta li{
  display:flex;
  align-items:baseline;
  gap:var(--space-1);
  white-space:nowrap;
}
.iih__meta-key{
  font-family:var(--font-ui);
  color:var(--wgf-muted);
  font-size:var(--text-xs);
  letter-spacing:.04em;
}
.iih__meta-val{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--wgf-text);
  font-size:var(--text-sm);
}
/* separator dot between meta items */
.iih__meta li + li::before{
  content:'·';
  color:var(--wgf-muted);
  margin-right:var(--space-1);
  font-family:var(--font-ui);
}

/* ── right column: price + freshness ── */
.iih__price-col{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-2);
  padding-left:var(--space-4);
  border-left:1px solid var(--wgf-border-neutral-soft);
  min-width:180px;
}
.iih__price-label{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--wgf-muted);
  margin-bottom:var(--space-1);
}
/* price sits at a larger scale than body */
.iih__price-col .wgf-price{
  font-size:var(--text-xl);
}

/* supporting sub-stat (avg, etc.) — subordinate to the latest price */
.iih__substat{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:var(--space-2);
  width:100%;
  margin:0;
  padding-top:var(--space-2);
  margin-top:var(--space-1);
  border-top:1px dashed var(--wgf-border-neutral);
}
.iih__substat-key{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  letter-spacing:.04em;
  color:var(--wgf-muted);
  white-space:nowrap;
}
.iih__substat-val .wgf-price{
  font-size:var(--text-md);
  color:var(--wgf-muted);
}
.iih__substat-val .wgf-price .wgf-num{color:var(--wgf-text);}
.iih__substat-val .wgf-price__scope{display:none;}
.iih__substat-val--empty{
  font-family:var(--font-ui);
  font-style:italic;
  color:var(--wgf-muted);
}

/* ── compact variant (single-row strip) ── */
.iih--compact{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-control);
}
.iih--compact .iih__body{
  align-items:center;
  gap:var(--space-2);
}
.iih--compact .iih__icon{
  width:34px;
  height:34px;
  border-radius:6px;
}
.iih--compact .iih__name{
  font-size:var(--text-md);
  margin:0;
}
.iih--compact .iih__price-col{
  padding-left:var(--space-3);
  min-width:auto;
  gap:var(--space-1);
}
.iih--compact .iih__price-col .wgf-price{
  font-size:var(--text-md);
}
.iih--compact .iih__chips,
.iih--compact .iih__meta{display:none;}
.iih--compact .iih__price-label{display:none;}

/* ── responsive: stack on narrow viewports ── */
@media(max-width:560px){
  .iih__body{flex-direction:column;gap:var(--space-3);}
  .iih__price-col{
    align-items:flex-start;
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--wgf-border-neutral-soft);
    padding-top:var(--space-3);
    min-width:0;
    width:100%;
  }
  /* compact strip keeps its single-row shape even on mobile */
  .iih--compact .iih__body{flex-direction:row;gap:var(--space-2);}
  .iih--compact .iih__price-col{
    border-top:0;padding-top:0;width:auto;align-items:flex-end;
  }
}

/* ── transitions (respect motion prefs) ── */
@media(prefers-reduced-motion:no-preference){
  .iih{transition:border-color var(--motion-fast) var(--ease-standard);}
  .iih:focus-within{border-color:var(--wgf-border-strong);}
}