/* ════════════════════════════════════════════════════════════════════════
   M08 — CHARACTER IDENTITY HEADER
   All tokens from _tokens.css (var(--wgf-*)); NO :root{} block.
   Brand gold: #f0c040 / var(--wgf-gold-primary). NEVER the retired 244,196,92 hex.
   Class colors: identity axis only (--ch-class-color set inline per element).
   Portrait: Blizzard API avatar_url → class-crest SVG. NEVER Wowhead CDN.
   ════════════════════════════════════════════════════════════════════════ */

/* Inline number token */
.ch__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ── Card shell ── */
.ch{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-hero);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  position:relative;
}

/* Thin class-color accent bar across the very top */
.ch::before{
  content:'';
  display:block;
  height:3px;
  background:var(--ch-class-color, var(--wgf-gold-accent));
}

/* Inner layout: portrait | identity block */
.ch__body{
  display:flex;
  align-items:flex-start;
  gap:var(--space-4);
  padding:var(--space-4);
}

/* ── Portrait cell ── */
.ch__portrait-wrap{
  flex:0 0 auto;
  position:relative;
  width:96px;
  height:96px;
}

.ch__portrait{
  width:96px;
  height:96px;
  border-radius:var(--radius-card);
  border:2px solid var(--ch-class-color, var(--wgf-border-neutral));
  background:var(--wgf-panel-3);
  object-fit:cover;
  display:block;
}

/* Neutral class-crest placeholder — SVG inline, no external CDN */
.ch__portrait-placeholder{
  width:96px;
  height:96px;
  border-radius:var(--radius-card);
  border:2px solid var(--ch-class-color, var(--wgf-border-neutral));
  background:var(--wgf-panel-3);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ch__portrait-placeholder svg{
  width:52px;
  height:52px;
  opacity:.7;
}

/* Faction pip (small badge bottom-right of portrait) */
.ch__faction{
  position:absolute;
  bottom:-4px;
  right:-4px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--wgf-panel-1);
  background:var(--wgf-panel-3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
  line-height:1;
}

/* ── Identity block (right of portrait) ── */
.ch__identity{
  flex:1 1 auto;
  min-width:0;
}

/* Name row: heading + optional inactive badge */
.ch__name-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0 0 var(--space-1);
}

.ch__name{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ch-class-color, var(--wgf-text));
  margin:0;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ch__meta{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0 0 var(--space-2);
  line-height:1.5;
}
/* "Class · Spec" portion uses the class color */
.ch__meta-class{
  color:var(--ch-class-color, var(--wgf-text));
  font-weight:600;
}
.ch__meta-sep{
  margin:0 .3em;
  color:var(--wgf-border-neutral);
}

/* Realm / Guild line */
.ch__location{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1);
}
.ch__location a{
  color:var(--wgf-link);
  font-size:var(--text-sm);
}
.ch__location-region{
  color:var(--wgf-muted);
  font-size:var(--text-sm);
}
.ch__location-guild{
  font-size:var(--text-sm);
  color:var(--wgf-muted);
}
.ch__location-noguild{
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  font-style:italic;
}

/* ── Rating strip ── */
.ch__rating-strip{
  border-top:1px solid var(--wgf-border-neutral);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}

@media(max-width:520px){
  .ch__rating-strip{grid-template-columns:repeat(2,1fr);}
  .ch__body{flex-direction:column;}
}

/* Each stat cell: value + label, centered */
.ch__stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--space-3) var(--space-4);
  border-right:1px solid var(--wgf-border-neutral);
  gap:var(--space-1);
}
.ch__stat:last-child{border-right:none;}

.ch__stat-value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-lg);
  font-weight:500;
  color:var(--wgf-text);
  line-height:1;
}
.ch__stat-value--mplus{ color:var(--wgf-gold-primary); }
.ch__stat-value--pvp  { color:var(--wgf-text); }
.ch__stat-value--ilvl { color:var(--wgf-text); }
.ch__stat-value--ach  { color:var(--wgf-muted); }

.ch__stat-label{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   ROW IDENTITY variant — compact: portrait-thumb | name | realm pill
   ════════════════════════════════════════════════════════════════════════ */
.ch-row{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3);
  max-width:420px;
  overflow:hidden;
  transition:border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
}
.ch-row:hover{
  border-color:var(--wgf-border);
  background:var(--wgf-panel-3);
}

.ch-row__thumb{
  width:32px;
  height:32px;
  border-radius:var(--radius-control);
  border:1px solid var(--ch-class-color, var(--wgf-border-neutral));
  background:var(--wgf-panel-3);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ch-row__thumb svg{
  width:18px;
  height:18px;
  opacity:.65;
}

.ch-row__name{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ch-class-color, var(--wgf-text));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 auto;
  min-width:0;
}

.ch-row__realm{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  white-space:nowrap;
  flex:0 0 auto;
}
.ch-row__realm a{
  color:var(--wgf-muted);
  font-size:var(--text-xs);
}
.ch-row__realm a:hover{color:var(--wgf-link);}

/* ════════════════════════════════════════════════════════════════════════
   INACTIVE / LAST-SEEN variant
   ════════════════════════════════════════════════════════════════════════ */
.ch--inactive{
  opacity:.72;
  filter:saturate(.35);
}
.ch--inactive::before{
  background:var(--wgf-border-neutral);
}
.ch--inactive .ch__name{
  color:var(--wgf-muted);
}
.ch--inactive .ch__stat-value{
  color:var(--wgf-muted);
}

/* Inactive badge beside .ch__name, NOT inside the <h2> */
.ch__inactive-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-pill);
  padding:2px var(--space-2);
  flex-shrink:0;
}
.ch__inactive-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--wgf-muted);
  display:inline-block;
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING SKELETON
   ════════════════════════════════════════════════════════════════════════ */
.ch-sk-portrait{
  width:96px;
  height:96px;
  border-radius:var(--radius-card);
  flex:0 0 auto;
}
.ch-sk-name{height:1.5em;width:48%;margin-bottom:var(--space-2);}
.ch-sk-meta{height:.85em;width:72%;margin-bottom:var(--space-2);}
.ch-sk-loc {height:.75em;width:40%;}
.ch-sk-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--space-3) var(--space-4);
  border-right:1px solid var(--wgf-border-neutral);
  gap:var(--space-2);
}
.ch-sk-stat:last-child{border-right:none;}
.ch-sk-val{height:1.25em;width:3.5ch;}
.ch-sk-lbl{height:.7em;width:6ch;}
.ch--loading{pointer-events:none;}
.ch--loading::before{
  background:var(--wgf-panel-3);
  animation:sk-pulse 1.4s ease-in-out infinite alternate;
}

/* class-crest SVG fill */
.class-crest{fill:currentColor;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}