/* page-specific layout (tokens come from fcc-tokens.css injected by nginx) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans, Inter, system-ui, sans-serif);
  background: var(--bg, #0c0d0f);
  color: var(--text, #f5f6f7);
  line-height: var(--leading-normal, 1.45);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar, 9000);
  background: var(--bg, #0c0d0f);
  border-bottom: 1px solid var(--line, #1e1e1e);
  height: var(--topbar-h, 56px);
  display: flex;
  align-items: center;
}
.topbar-content {
  width: 100%;
  max-width: var(--container, 1100px);
  margin: 0 auto;
  padding: 0 var(--sp-6, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
}
.brand {
  font-weight: 800;
  font-size: var(--text-lg, 1.125rem);
  color: var(--text, #f5f6f7);
  text-decoration: none;
}
.brand:hover { color: var(--accent, #c7d2fe); }

.page-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3, 0.75rem);
  flex-wrap: wrap;
}

.container {
  max-width: var(--container, 1100px);
  margin: 0 auto;
  padding: var(--sp-8, 2rem) var(--sp-6, 1.5rem) var(--sp-16, 4rem);
}

h1 {
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 800;
  margin-bottom: var(--sp-1, 0.25rem);
}
.page-sub {
  color: var(--text-dim, #9aa3b2);
  font-size: var(--text-sm, 0.875rem);
  margin-bottom: var(--sp-8, 2rem);
}

.current-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full, 9999px);
  background: rgba(199, 210, 254, 0.15);
  color: var(--accent, #c7d2fe);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ── Release card ─────────────────────────────────────────────────────── */
.release {
  background: var(--panel, #111214);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--sp-6, 1.5rem);
  margin-bottom: var(--sp-6, 1.5rem);
}
.release__header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2, 0.5rem);
}
.release__version {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 800;
}
.release__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  color: var(--text-dim, #9aa3b2);
}
.release__date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-dim, #9aa3b2);
  margin-bottom: var(--sp-4, 1rem);
}
.release__summary {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-dim, #9aa3b2);
  line-height: var(--leading-loose, 1.65);
  margin-bottom: var(--sp-5, 1.25rem);
}

/* Change categories */
.release__changes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 1rem);
}
.change-group__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2, 0.5rem);
}
.change-group__label--new      { color: var(--success, #4ade80); }
.change-group__label--improved { color: var(--info, #818cf8); }
.change-group__label--fixed    { color: var(--warning, #fbbf24); }

.change-group ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 0.25rem);
}
.change-group li {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text, #f5f6f7);
  padding-left: 1.2em;
  position: relative;
}
.change-group li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--text-dim, #9aa3b2);
}

/* ── Walkthrough preview ──────────────────────────────────────────────── */
.release__tour {
  margin-top: var(--sp-5, 1.25rem);
  padding-top: var(--sp-5, 1.25rem);
  border-top: 1px solid var(--line, #1e1e1e);
}
.release__tour-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #c7d2fe);
  margin-bottom: var(--sp-3, 0.75rem);
}
.tour-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--sp-3, 0.75rem);
}
.tour-step {
  background: var(--panel-2, #15171a);
  border: 1px solid var(--line, #1e1e1e);
  border-radius: var(--radius, 0.35rem);
  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
}
.tour-step__num {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  color: var(--accent, #c7d2fe);
  margin-bottom: var(--sp-1, 0.25rem);
}
.tour-step__title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  margin-bottom: var(--sp-1, 0.25rem);
}
.tour-step__body {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-dim, #9aa3b2);
  line-height: var(--leading-normal, 1.45);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--sp-10, 2.5rem);
  color: var(--text-dim, #9aa3b2);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.fineprint {
  text-align: center;
  padding: var(--sp-6, 1.5rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-dim, #9aa3b2);
}
.fineprint a {
  color: var(--text-dim, #9aa3b2);
  text-decoration: none;
}
.fineprint a:hover { color: var(--accent, #c7d2fe); }

@media (max-width: 560px) {
  .container { padding: var(--sp-5, 1.25rem) var(--sp-4, 1rem) var(--sp-10, 2.5rem); }
  h1 { font-size: var(--text-2xl, 1.5rem); }
  .tour-steps { grid-template-columns: 1fr; }
}