/* feat/record-by-market -- styling for src/lib/record-by-market.tsx's
   small-multiples grid (/record's "By market, year by year" section and
   /s/<symbol>'s single-market "Historical backfill, year by year"
   mini-section). Own file per the "new CSS goes in its own file, not
   style.css / motion-charts.css" parallel-agent rule. Must load on the
   same page as style.css AND motion-charts.css (see layout.tsx's
   hasRecordMarket + hasMotionCharts props) — reuses style.css's tokens
   (--border, --bg-raised, --text-dim) and motion-charts.css's .mc-panel /
   .mc-svg-wrap / .mc-caption / .mc-empty classes, never redefines them. */

.rbm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}

/* Mobile: 1 column. Small tablet+: 2 columns. Desktop: 3 columns x 2 rows
   for the 6 tracked futures markets — same min-width breakpoints style.css
   already uses for .card-grid.cols-2/cols-3. */
@media (min-width: 560px) {
  .rbm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .rbm-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rbm-cell {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rbm-cell h3 {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-dim);
}

.rbm-single {
  max-width: 520px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}