/* M16 — Supply & Quantity Panel
   Single-homed canonical CSS (one file, one concern).
   Tokens: var(--wgf-*) — never :root here.
   Supply depth is NOT market direction — uses neutral fills only. */

/* ── panel shell ── */
.sp{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  /* squared-corners law (slop-audit-2026-07-04: .sp radius-card = rounded web card) */
  border-radius:0;
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}

/* ── panel header row ── */
.sp__header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.sp__title{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--wgf-gold-muted);
  margin:0;
}
.sp__scope{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}

/* ── stat blocks row ── */
.sp__stats{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-4);
}
.sp__stat{
  flex:1 1 auto;
  min-width:120px;
  background:var(--wgf-well);
  border:1px solid var(--wgf-metal-soft);
  border-radius:0;
  padding:var(--space-2) var(--space-3);
  box-shadow:inset 0 2px 5px rgba(0,0,0,0.65);
}
.sp__stat-val{
  font-family:var(--font-game);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--wgf-gold);
  line-height:1.2;
  display:block;
  text-shadow:var(--text-ink-outline);
}
.sp__stat-lbl{
  font-family:var(--font-game);
  font-size:var(--text-xs);
  font-variant:small-caps;
  color:var(--wgf-gold-muted);
  display:block;
  margin-top:2px;
}

/* ── depth read — supply depth is not market direction (neutral fills only) ── */
.sp__depth{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.sp__depth-badge{
  font-family:var(--font-game);
  font-size:var(--text-xs);
  font-variant:small-caps;
  letter-spacing:.07em;
  padding:var(--space-1) var(--space-2);
  border-radius:0;
  border:1px solid var(--wgf-metal-soft);
  background:var(--wgf-well);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
  white-space:nowrap;
  flex:0 0 auto;
}
.sp__depth-badge--thick{
  color:var(--wgf-text);
  border-color:var(--wgf-border);
  background:var(--wgf-panel-3);
}
.sp__depth-badge--moderate{
  color:var(--wgf-gold-muted);
  border-color:var(--wgf-border-neutral);
  background:var(--wgf-panel-2);
}
.sp__depth-badge--thin{
  color:var(--wgf-muted);
  border-color:var(--wgf-border-neutral-soft);
  background:var(--wgf-panel-1);
}
.sp__depth-reason{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}

/* ── supply depth bar + mini quantity band bar: RETIRED ──
   Owner law 2026-07-03 bans percentage-fill stat bars (slop-audit-2026-07-04
   Lane 5: .sp__bar / .sp__bar-fill / .sp__band-track pill bars). The depth
   read is the squared .sp__depth-badge plate above plus the real counts in
   .sp__stats. The band-bar family (.sp__band-*) had no emitter anywhere in
   the repo (dead code) and is deleted outright. The wave0 doctrine ratchet
   (tests/test_wave0_doctrine.py) locks all of these out of this file. */

/* ── freshness trust line ── */
.sp__fresh{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
}
/* markup uses .sp__meta - quiet text, no container */
.sp__meta{
  margin:var(--space-2) 0 0;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}

/* ── no-supply state ── */
.sp--nosupply{border-color:var(--wgf-border-neutral-soft);}
.sp__nosupply-body{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.sp__nosupply-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp__nosupply-icon svg{width:16px;height:16px;color:var(--wgf-muted);}
.sp__nosupply-text{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  line-height:1.5;
}
.sp__nosupply-text strong{
  color:var(--wgf-text);
  display:block;
  margin-bottom:2px;
}
.sp__nosupply-last{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}