/* bulldial.com — products page. Extends bd.css; owns only the grid and
 * the per-card data strips. Everything tokenised: no colour appears here
 * that is not a bd.css token. */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.prod-loading { color: var(--ink-3); font-size: var(--t-sm); }

/* ── card ─────────────────────────────────────────────────────────── */

.prod {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.prod-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.prod-rank {
  font-family: var(--font-num);
  font-size: var(--t-xs);
  color: var(--ink-3);
  min-width: 1.6em;
}
.prod-top h3 { font-size: var(--t-h3); margin: 0; flex: 1; min-width: 0; }

/* ── data strip ───────────────────────────────────────────────────── */

.prod-data {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  font-family: var(--font-num);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 2.2em;
  overflow-x: auto;
}
.prod-data .row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  white-space: nowrap;
}
.prod-data .row .k { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.prod-data .row .v { color: var(--ink); }
.prod-data .row .v.up   { color: var(--up); }
.prod-data .row .v.down { color: var(--down); }
.prod-data .row .v.warn { color: var(--warn); }
.prod-data .quiet { color: var(--ink-3); font-family: var(--font); }
.prod-asof {
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-family: var(--font-num);
  margin-top: auto;
}