/* market-site's own styles. Semantic tokens only (css/themes.css). */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: hsl(var(--canvas, 190 18% 5%));
  color: hsl(var(--text, 150 18% 78%));
  font: 400 15px/1.5 -apple-system, "Albert Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--reference, 208 36% 70%)); text-decoration: none; }
a:hover { text-decoration: underline; }

header.site-header {
  padding: 20px 24px;
  border-bottom: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15));
  display: flex;
  align-items: baseline;
  gap: 10px;
}
header.site-header .site-kicker {
  font: 500 11px/1.3 ui-monospace, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: hsl(var(--text-muted, 150 10% 60%));
}
header.site-header h1 { margin: 0; font-size: 18px; color: hsl(var(--text-strong, 135 41% 88%)); }

main { max-width: 860px; margin: 0 auto; padding: 24px; }

.site-note { color: hsl(var(--text-faint, 160 9% 44%)); font-size: 13px; }
.site-note.site-error { color: hsl(var(--danger, 5 62% 62%)); }

.listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.listing-card { background: hsl(var(--surface, 188 12% 11%)); border: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15)); border-radius: 10px; padding: 18px; }
.listing-card h4 { margin: 0 0 8px; color: hsl(var(--text-strong, 135 41% 88%)); font-size: 15px; }
.listing-price { font: 600 16px/1.3 ui-monospace, monospace; color: hsl(var(--live, 145 34% 58%)); margin: 0 0 10px; }
.listing-meta { font: 400 12px/1.3 ui-monospace, monospace; color: hsl(var(--text-muted, 150 10% 60%)); margin: 4px 0; }

.media-thumb, .media-missing {
  display: block;
  width: 100%;
  height: 160px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: hsl(var(--canvas, 190 18% 5%));
  border: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15));
  object-fit: cover;
}
.media-missing { display: flex; align-items: center; justify-content: center; color: hsl(var(--text-faint, 160 9% 44%)); font-size: 12px; }
iframe.media-thumb { border: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15)); }