/* markets.css — programmatic local-market pages (markets/*.html) + the /markets/ hub.
 * Generated pages come from scripts/gen-markets.mjs (revenue spec §8.1). Everything
 * here layers on tokens.css/components.css — no new colors, only token references. */

/* Stats grid (reuses the .stat dt/dd primitive from components.css, carded) */
.market-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-5);
  margin: 0;
}
.market-stats .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}

/* Honest-sourcing line under stat blocks */
.market-source {
  margin-top: var(--s-6);
  font-size: 0.88rem;
  color: var(--faint);
  max-width: 640px;
}

/* Hub: one section per city */
.market-city { margin-bottom: var(--s-7); }
.market-city h2 { margin-bottom: var(--s-4); }
.market-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.market-links li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}
.market-links a { font-weight: 600; text-decoration: none; color: var(--forest-2); }
.market-links a:hover { text-decoration: underline; }
.market-links-n { font-size: 0.84rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 560px) {
  .market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}