/* stat-band -hero two-cell "X / Y" display with severity tinting and
 * an optional foot row carrying a label + chip.
 *
 * Usage:
 *
 *   <article class="stat-band stat-band--bad">
 *     <div class="stat-band-row">
 *       <div class="stat-band-cell">
 *         <div class="stat-band-label">Cost per portion</div>
 *         <div class="stat-band-value">3 280 <small>FCFA</small></div>
 *       </div>
 *       <div class="stat-band-cell">
 *         <div class="stat-band-label">Food cost %</div>
 *         <div class="stat-band-value">42.1%</div>
 *       </div>
 *     </div>
 *     <div class="stat-band-meta">
 *       <span>Target 30% · Delta +12.1pp</span>
 *       <span class="chip error">off target</span>
 *     </div>
 *   </article>
 *
 * Variants:
 *   stat-band--ok       -neutral surface (default colors)
 *   stat-band--warning  -warning-bg tint
 *   stat-band--bad      -error-bg tint
 *
 * Reuse beyond recipes: financials cashflow hero (Cash on file / Open
 * drawers), period-close preview (Net revenue / Net operating profit),
 * any surface that needs a "two big numbers + delta caption" hero.
 *
 * Legacy aliases:
 *   ``.stat-band.bad`` / ``.stat-band.ok`` were the pre-DS variants
 *   used by recipe-detail.html -kept here so prod renders cleanly
 *   while the templates migrate to the ``--`` modifier convention.
 */

.stat-band {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-band--ok {
  background: var(--surface);
  border-color: var(--divider);
}

.stat-band--warning,
.stat-band.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.stat-band--bad,
.stat-band.bad {
  background: var(--error-bg);
  border-color: var(--error-border);
}

.stat-band-row,
.stat-band .stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.stat-band-row.is-3up,
.stat-band .stat-row.is-3up {
  grid-template-columns: 1fr 1fr 1fr;
}

.stat-band-cell,
.stat-band .stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-band-label,
.stat-band .stat-cell .label,
.stat-band .label {
  font-size: var(--font-size-nano);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-micro-label);
  color: var(--muted);
}

.stat-band--warning .stat-band-label,
.stat-band.warning .stat-cell .label,
.stat-band--bad .stat-band-label,
.stat-band.bad .stat-cell .label {
  color: var(--text);
  opacity: 0.7;
}

.stat-band-value,
.stat-band .stat-cell .value,
.stat-band .value {
  font-size: var(--font-size-page-title);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

.stat-band-value small,
.stat-band .stat-cell .value small,
.stat-band .value small {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}

.stat-band-meta,
.stat-band .stat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--divider);
}

.stat-band--warning .stat-band-meta,
.stat-band.warning .stat-meta {
  border-top-color: var(--warning-border);
}

.stat-band--bad .stat-band-meta,
.stat-band.bad .stat-meta {
  border-top-color: var(--error-border);
}