/* Kepr Builds page — canvas grid of shifting save IDs */

body.page-releases {
  background: #0E0C09;
}

/* Film grain — makes the dark space feel material */
body.page-releases::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
}

/* Canvas grid — fixed, behind everything */
#grid-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Nav sits above the canvas */
body.page-releases nav { position: relative; z-index: 2; }

/* Override the global main max-width for this page */
body.page-releases main { max-width: none; }

/* Content floats in the space — no card, no panel */
.page-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 24px 160px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */

.releases-breadcrumb {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #3a3028;
  margin-bottom: 48px;
}

.releases-breadcrumb a {
  color: #3a3028;
  text-decoration: none;
}

.releases-breadcrumb a:hover { color: #7A7060; }

/* ── Hero: latest build ─────────────────────────────────────────── */

.repo-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: #E8E0D0;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 32px;
  display: block;
}

.latest-version {
  font-family: 'Courier New', monospace;
  font-size: 22px;
  color: #D4A840;
  display: block;
  margin-bottom: 6px;
}

.latest-meta {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #7A7060;
  margin-bottom: 28px;
  line-height: 1.8;
}

.latest-meta a {
  color: #c8bfb0;
  text-decoration: none;
}

.latest-meta a:hover { color: #D4A840; }

/* ── Platform table (hero + expanded history) ───────────────────── */

.platform-table {
  width: 100%;
  margin-bottom: 48px;
}

.platform-row {
  display: grid;
  grid-template-columns: 150px 16px 52px 24px 52px 52px;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #0f0d0b;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.platform-name     { color: #c8bfb0; }
.platform-status   { color: #D4A840; }
.platform-size     { color: #7A7060; text-align: right; }

.platform-download {
  color: #D4A840;
  opacity: 0.6;
  text-decoration: none;
  font-size: 13px;
  transition: opacity 100ms;
  text-align: center;
}

.platform-download:hover { opacity: 1; text-decoration: none; }

.platform-hash {
  color: #7A7060;
  font-size: 10px;
  text-decoration: none;
  transition: color 100ms;
  text-align: center;
}

.platform-hash:hover { color: #c8bfb0; text-decoration: none; }

/* ── Historical releases ────────────────────────────────────────── */

.release-divider {
  border: none;
  border-top: 1px solid #1a1510;
  margin: 0 0 16px;
}

.release-row {
  display: grid;
  grid-template-columns: 72px 68px 96px 1fr 12px;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #0a0908;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #7A7060;
  transition: color 80ms;
  user-select: none;
}

.release-row:hover { color: #c8bfb0; }

.release-version { color: #c8bfb0; }
.release-face    { color: #7A7060; }
.release-date    { color: #7A7060; }
.release-count   { color: #7A7060; }

.release-expand {
  color: #D4A840;
  opacity: 0.4;
  transition: transform 150ms ease, opacity 100ms;
}

.release-row:hover .release-expand { opacity: 0.7; }

.release-row.open .release-expand {
  transform: rotate(90deg);
  opacity: 0.8;
}

.release-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}

.release-detail.open { max-height: 500px; }

.release-save-message {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: #7A7060;
  padding: 10px 0 8px;
  line-height: 1.5;
}

/* ── Empty state ────────────────────────────────────────────────── */

.releases-empty { padding-top: 24px; }

.releases-empty-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #7A7060;
  font-weight: 400;
  margin-bottom: 8px;
  display: block;
}

.releases-empty-body {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #3a3028;
  line-height: 1.9;
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .repo-name { font-size: 36px; }

  .platform-row {
    grid-template-columns: 1fr 16px 44px 20px 44px 44px;
    gap: 6px;
  }

  .release-row {
    grid-template-columns: 60px 56px 80px 1fr 12px;
    gap: 8px;
  }
}