/* wgf-stat-block.css — Module M53: Stat block primitive.
   A compact labeled set of key/value facts about an entity — item stats, character
   ratings, realm metrics, or spell properties. Values are always mono; labels are
   quiet prose. Two forms: full card (.sb) and inline mini (.sb-mini).
   Reused on item pages, character pages, realm pages, and in card rows.
   Colours/type from _tokens.css. */

/* ── Card shell ── */
.sb{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-4);
  max-width:420px;
  box-shadow:var(--shadow-1);
}

/* group subhead — thin all-caps label above a set of rows */
.sb__group-head{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--wgf-gold-muted);
  border-bottom:1px solid var(--wgf-border-neutral-soft);
  padding-bottom:var(--space-1);
  margin:var(--space-3) 0 var(--space-2);
}
.sb__group:first-child .sb__group-head{margin-top:0;}

/* definition list wrapper */
.sb__dl{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
/* each row: label ←→ value */
.sb__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:var(--space-3);
  padding:var(--space-1) 0;
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.sb__row:last-child{border-bottom:none;}

/* label — quiet prose, muted, never mono */
.sb__label{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  white-space:nowrap;
}

/* value — mono, tabular, right-aligned; all numbers are mono */
.sb__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--wgf-text);
  text-align:right;
  white-space:nowrap;
}

/* value modifiers — only for genuine market DIRECTION */
.sb__value--up  {color:var(--wgf-up);}
.sb__value--down{color:var(--wgf-down);}
/* unknown / missing — muted em-dash */
.sb__value--unknown{color:var(--wgf-muted);font-style:normal;}

/* optional trend glyph beside the value */
.sb__trend{font-size:var(--text-xs);margin-left:var(--space-1);}

/* freshness footer (stat blocks that contain AH data show a freshness line) */
.sb__fresh{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
}

/* ── Inline mini (1-row strip, no card shell) ── */
.sb-mini{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);
}
.sb-mini__item{
  display:flex;
  align-items:baseline;
  gap:var(--space-1);
}
.sb-mini__label{
  font-family:var(--font-ui);
  color:var(--wgf-muted);
  white-space:nowrap;
}
.sb-mini__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--wgf-text);
  font-weight:500;
  white-space:nowrap;
}
.sb-mini__sep{
  color:var(--wgf-border-neutral);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  user-select:none;
}

/* ── Skeleton / loading ── */
.skeleton-bar{
  background:var(--wgf-panel-3);
  border-radius:var(--radius-control);
  animation:sk-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes sk-pulse{from{opacity:.4}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  .skeleton-bar{animation:none;opacity:.55;}
}
.sk-head{height:.75em;width:40%;margin-bottom:var(--space-2);}
.sk-row{height:.85em;width:100%;margin-bottom:calc(var(--space-1) + 2px);}
.sk-row-2{width:88%;}
.sk-row-3{width:76%;}
.sk-row-4{width:90%;}
.sk-row-5{width:70%;}

/* ── Responsive: narrow screens ── */
@media(max-width:480px){
  .sb{padding:var(--space-2) var(--space-3);}
  .sb__row{gap:var(--space-2);}
  .sb-mini{flex-wrap:wrap;gap:var(--space-2);}
}

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