/* 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: var(--wgf-gold-primary) / var(--wgf-gold-primary). */

/* ── panel shell ── */
/* Neutralised: the item hero renders the SSR in-game tooltip card as its visual
   container; adding a second rounded card frame here creates a double-frame.
   The background/border/radius are stripped so the tooltip plate reads clean.
   .iih--compact (used in list contexts) restores a squared plate on its own. */
.iih{
  background:transparent;
  border:0;
  border-radius:0;
  padding:var(--space-4);
  box-shadow:none;
}

/* ── 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;
}
/* SSR in-game tooltip card as the identity block (item_facts.render_tooltip_card):
   card leads, taxonomy chips sit under it. */
.iih__main--tooltip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
}
.iih__main--tooltip .iih__chips{margin:0;}

/* item name — the page <h1>. Scoped under .iih so it out-specifies the global
   `.wgf-shell-page h1` hero rule (clamp 34–68px) in wgf-site-shell.css — without this a long
   item name renders at ~68px and wraps to 4 lines, dwarfing the icon. Responsive: prominent but
   never gigantic (~26→36px), with overflow-wrap so a very long single-word name can't overflow. */
.iih .iih__name{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 1rem + 1.6vw, 2.25rem);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.12;
  margin:0 0 var(--space-2);
  overflow-wrap:anywhere;
}
/* 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:3px;
  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) ── */
/* Compact restores its own squared plate chrome since the base .iih is now transparent. */
.iih--compact{
  padding:var(--space-2) var(--space-3);
  border-radius:4px;
  background:var(--wgf-well);
  border:1px solid var(--wgf-metal-soft);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);
}
.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: narrow viewports ──
   Keep the icon beside the name (row), wrap only the price below — so the icon stays
   "cleanly to the left" of the item on mobile instead of stacking above it. */
@media(max-width:560px){
  .iih{padding:var(--space-3);}
  .iih__body{flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:flex-start;}
  .iih__main{flex:1 1 60%;min-width:0;}
  .iih__price-col{
    flex:1 1 100%;            /* full-width row below the icon+name */
    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%;
  }
  .iih__substat{justify-content:flex-start;}
  /* 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);}
}

/* Watch button (device-local watchlist; ported from the retired AH in-page panel).
   State + toggle: assets/wgf-item-watch.js. */
.iih__watch{
  margin-top:var(--space-2);
  background:var(--wgf-panel-2);
  border:1px solid rgba(var(--wgf-gold-rgb),.35);
  border-radius:3px;
  padding:.25rem .7rem;
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-gold-primary);
  cursor:pointer;
}
.iih__watch:hover{border-color:var(--wgf-gold-primary);}
.iih__watch:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.iih__watch[aria-pressed="true"]{background:rgba(var(--wgf-gold-rgb),.12);}