/* wgf-item-hero-ingame.css - the item page hero AS the in-game tooltip brought to life
   (owner directive 5, docs/ui-ux/13-ingame-reference sec 0.5, refs ig-40/ig-42: near-black
   plate, thin gilt rim, quality-coloured title, gold flavor stamp).

   SCOPE: .iih--ingame ONLY - the hero article on /item/ pages. The JS hover card
   (.wgf-it without --inline) keeps its own skin in wgf-item-tooltip.css untouched;
   this file loads AFTER wgf-item-page.css in the item page's module CSS list.

   Art: real extracted client textures only - assets/ui/professions-slot-frame*.png
   (the 40px profession slot frames; icon window spans ~34px of the 40px texture).
   Every overlay here is absolutely positioned at fixed sizes -> zero CLS. */

/* ── 1. The tooltip plate: dark plate + thin gilt border (ig-40 chrome) ───────── */
.iih--ingame .wgf-it--inline{
  background:linear-gradient(180deg, rgba(10, 9, 20, .97), rgba(4, 4, 12, .985));
  border:1px solid rgba(199, 168, 102, .6);          /* the thin gilt rim */
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .85),                    /* black keyline outside the gilt */
    inset 0 0 0 1px rgba(0, 0, 0, .7),               /* dark inner seat */
    inset 0 1px 0 rgba(240, 200, 120, .07),          /* faint top sheen on the frame */
    0 12px 38px rgba(0, 0, 0, .65);
}

/* ── 2. Item icon in the quality slot frame (professions-slot-frame family) ─────
   The hero icon renders 52px (wgf-item-page.css); the 40px frame texture's icon
   window is ~34px, so the frame overlay scales to 62px inset -5px and rides ON TOP
   of the icon as a pure ::before overlay - layout never moves. The datamine-miss
   fallback branch (.iih__icon-wrap, 60px icon) gets the same frame at 70px. */
.iih--ingame .wgf-it--inline .wgf-it__head{position:relative;}
.iih--ingame .iih__icon-wrap{position:relative;}
.iih--ingame .wgf-it--inline .wgf-it__head::before,
.iih--ingame .iih__icon-wrap::before{
  content:"";
  position:absolute;
  left:-5px; top:-5px;
  width:62px; height:62px;
  background:url("/assets/ui/professions-slot-frame-white.png") center/100% 100% no-repeat;
  pointer-events:none;
  z-index:1;
}
.iih--ingame .iih__icon-wrap::before{width:70px;height:70px;}

/* quality -> frame texture, keyed off data-wgf-quality on the hero article
   (poor rides the plain iron frame; artifact borrows legendary, heirloom rides blue -
   the client ships no dedicated frames for those two). */
.iih--ingame[data-wgf-quality="poor"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="poor"] .iih__icon-wrap::before{
  background-image:url("/assets/ui/professions-slot-frame.png");
}
.iih--ingame[data-wgf-quality="uncommon"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="uncommon"] .iih__icon-wrap::before{
  background-image:url("/assets/ui/professions-slot-frame-green.png");
}
.iih--ingame[data-wgf-quality="rare"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="rare"] .iih__icon-wrap::before,
.iih--ingame[data-wgf-quality="heirloom"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="heirloom"] .iih__icon-wrap::before{
  background-image:url("/assets/ui/professions-slot-frame-blue.png");
}
.iih--ingame[data-wgf-quality="epic"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="epic"] .iih__icon-wrap::before{
  background-image:url("/assets/ui/professions-slot-frame-epic.png");
}
.iih--ingame[data-wgf-quality="legendary"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="legendary"] .iih__icon-wrap::before,
.iih--ingame[data-wgf-quality="artifact"] .wgf-it__head::before,
.iih--ingame[data-wgf-quality="artifact"] .iih__icon-wrap::before{
  background-image:url("/assets/ui/professions-slot-frame-legendary.png");
}

/* The icon squares off UNDER the frame: the slot frame IS the border now, so the
   old rounded 1px border / outline ring retire inside the hero scope. */
.iih--ingame .wgf-it--inline .wgf-it__icon{
  border-radius:2px;
  border-color:transparent;
  background:#000;
}
.iih--ingame .iih__icon{
  border-radius:2px;
  outline:none;
}

/* ── 3. Title: quality colour (global .q-* rules) + the in-game ink outline ───── */
.iih--ingame .wgf-it__name{
  text-shadow:0 1px 2px rgba(0, 0, 0, .9);
}

/* ── 4. Page-context market lines read as tooltip lines, not satellite chrome ───
   Meta stack: freshness stamp / typical / delta stack left-aligned like the
   tooltip's own body lines instead of a spread justify row. */
.iih--ingame .wgf-it__market .wgf-it__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin-top:var(--space-2);
}

/* Snapshot/freshness line = the flavor-text idiom (gold italic, quiet, no seal disc). */
.iih--ingame .wgf-it__meta .wgf-snapshot{
  font-style:italic;
  color:#ffd100;                                    /* in-game flavor gold */
  gap:.35rem;
}
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__seal{display:none;}
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__label,
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__rel,
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__scope,
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__src,
.iih--ingame .wgf-it__meta .wgf-snapshot .wgf-snapshot__sep{
  color:inherit;
  font-style:italic;
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  font-variant-numeric:normal;
}

/* Typical substat as a tooltip meta line: gold label, value in coins, no rule bar. */
.iih--ingame .wgf-it__meta .iih__substat{
  width:auto;
  margin:0;
  padding:0;
  border-top:0;
  justify-content:flex-start;
}
.iih--ingame .wgf-it__meta .iih__substat-key{color:#ffd100;}

/* Delta chips sit left with the other tooltip lines. */
.iih--ingame .wgf-it__meta .idelta{justify-content:flex-start;}