/* collections-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%)); }

.item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: hsl(var(--border-default, 180 24% 84% / 0.15)); border-radius: 8px; overflow: hidden; }
.item-list li { background: hsl(var(--surface, 188 12% 11%)); padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.item-list .item-title { color: hsl(var(--text-strong, 135 41% 88%)); font-weight: 500; }
.item-list .item-meta { font: 400 12px/1.3 ui-monospace, monospace; color: hsl(var(--text-muted, 150 10% 60%)); white-space: nowrap; }

.item-detail h2 { color: hsl(var(--text-strong, 135 41% 88%)); margin: 0 0 4px; }
.item-detail .item-field { margin: 14px 0; }
.item-detail .item-field dt { font: 500 11px/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--text-muted, 150 10% 60%)); margin-bottom: 4px; }
.item-detail .item-field dd { margin: 0; color: hsl(var(--text, 150 18% 78%)); }
.item-detail .item-cid { font: 400 12px/1.4 ui-monospace, monospace; word-break: break-all; color: hsl(var(--text-faint, 160 9% 44%)); }

.back-link { display: inline-block; margin-bottom: 16px; font: 500 12px/1.3 ui-monospace, monospace; }

.trait-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trait-chip { font: 500 11px/1.3 ui-monospace, monospace; padding: 4px 10px; border-radius: 999px; background: hsl(var(--surface, 188 12% 11%)); border: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15)); color: hsl(var(--text, 150 18% 78%)); }
.trait-chip b { color: hsl(var(--text-strong, 135 41% 88%)); }

.listing-badge { font: 500 11px/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; color: hsl(var(--live, 145 34% 58%)); background: hsl(var(--live, 145 34% 58%) / 0.12); }

.upgrade-history { list-style: none; margin: 0; padding: 0; }
.upgrade-entry { border-left: 2px solid hsl(var(--border-strong, 180 24% 62% / 0.28)); padding: 8px 0 8px 12px; margin: 10px 0; }
.upgrade-entry .upgrade-meta { font: 400 12px/1.3 ui-monospace, monospace; color: hsl(var(--text-muted, 150 10% 60%)); }

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

.collection-cover { width: 100%; max-width: 280px; border-radius: 10px; margin-bottom: 14px; display: block; }
.collection-about { color: hsl(var(--text, 150 18% 78%)); max-width: 640px; margin: 0 0 16px; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.asset-card { background: hsl(var(--surface, 188 12% 11%)); border: 1px solid hsl(var(--border-default, 180 24% 84% / 0.15)); border-radius: 10px; padding: 14px; }
.asset-card .item-title { display: block; margin-bottom: 4px; color: hsl(var(--text-strong, 135 41% 88%)); font-weight: 500; }
.upgrade-entry .upgrade-reason { margin: 4px 0 6px; color: hsl(var(--text, 150 18% 78%)); }