/* ==========================================================================
   Vista City — Changelog
   Charakter: Release-Log. Monospace, feste Spaltenbreiten, Aenderungsart
   als farbiges Präfix — lesbar wie ein Terminal, nicht wie ein Blog.
   ========================================================================== */

.log { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--space-section); }

/* --- Filterleiste --------------------------------------------------------- */

.log .filterbar { position: sticky; top: 5.5rem; z-index: 5; padding-block: 0.75rem; background: var(--bg); }

/* --- Version -------------------------------------------------------------- */

.release {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.release:first-of-type { border-top: 0; }
.release[hidden] { display: none; }

.release__head { position: sticky; top: 9.5rem; display: grid; gap: 0.6rem; }

.release__version {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.release__version::before {
  content: '';
  width: 0.55rem; height: 0.55rem;
  border-radius: var(--r-pill);
  background: var(--line-hi);
}
.release--latest .release__version { color: var(--accent); }
.release--latest .release__version::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}

.release__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.release__name {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Einträge ------------------------------------------------------------ */

.entries {
  display: grid;
  gap: 0.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}

.entry {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  transition: background-color var(--dur-fast) linear;
}
.entry + .entry { border-top: 1px solid var(--line); }
.entry:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.entry[hidden] { display: none; }

/* Aenderungsart als farbiges Präfix, wie ein Diff-Marker. */
.entry__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}
.entry--added .entry__type   { color: var(--state-live); }
.entry--fixed .entry__type   { color: var(--state-info); }
.entry--changed .entry__type { color: var(--state-warn); }
.entry--removed .entry__type { color: var(--state-crit); }

.entry__text { color: var(--ink-soft); }
.entry__text b { color: var(--ink); font-weight: 700; }
.entry__text code {
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* Farbige Kante links, passend zur Aenderungsart. */
.entry { border-left: 2px solid transparent; }
.entry--added   { border-left-color: color-mix(in oklab, var(--state-live) 50%, transparent); }
.entry--fixed   { border-left-color: color-mix(in oklab, var(--state-info) 50%, transparent); }
.entry--changed { border-left-color: color-mix(in oklab, var(--state-warn) 50%, transparent); }
.entry--removed { border-left-color: color-mix(in oklab, var(--state-crit) 50%, transparent); }

/* --- Kopfzahlen ----------------------------------------------------------- */

.logstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.logstat { display: grid; gap: 0.3rem; padding: 1.1rem 1.25rem; background: var(--surface); }
.logstat b {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logstat span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- Umbrüche ------------------------------------------------------------ */

@media (max-width: 56rem) {
  .release { grid-template-columns: 1fr; }
  .release__head { position: static; }
  .log .filterbar { position: static; }
  .entry { grid-template-columns: 5rem minmax(0, 1fr); }
}