/* 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);
  border-radius:var(--radius-card);
  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-panel-2);
  border:1px solid var(--wgf-border-neutral-soft);
  border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3);
}
.sp__stat-val{
  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.2;
  display:block;
}
.sp__stat-lbl{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-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-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:3px var(--space-2);
  border-radius:var(--radius-control);
  border:1px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-3);
  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;
}

/* ── mini quantity band bar — neutral fills only (supply is not direction) ── */
.sp__band-label{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  margin:0 0 var(--space-1);
}
.sp__band-track{
  display:flex;
  height:10px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral-soft);
  margin-bottom:var(--space-2);
}
.sp__band-seg--floor    {background:var(--wgf-gold-muted);}
.sp__band-seg--ten      {background:var(--wgf-panel-3);border-left:1px solid var(--wgf-border-neutral);}
.sp__band-seg--twentyfive{background:var(--wgf-border-neutral);}
.sp__band-legend{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.sp__band-legend-item{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  font-variant-numeric:tabular-nums;
}
.sp__band-dot{
  width:8px;
  height:8px;
  border-radius:2px;
  flex:0 0 auto;
}
.sp__band-dot--floor     {background:var(--wgf-gold-muted);}
.sp__band-dot--ten       {background:var(--wgf-panel-3);border:1px solid var(--wgf-border-neutral);}
.sp__band-dot--twentyfive{background:var(--wgf-border-neutral);}

/* ── freshness trust line ── */
.sp__fresh{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--wgf-border-neutral-soft);
}

/* ── 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;
}