/* Chat Tower Companion -- pages/changelog.css
 * P6-Kette Glied 6/8 (web-241). Reine Verschiebung aus web/public/style.css
 * -- absorbiert dabei strukturell den ui-463-Hotfix (Changelog mobil
 * unlesbar, @media(max-width:480px)-Block war bereits Teil dieser Sektion,
 * s. web-241-Ticket) PLUS den Bucket-O-Nachtrag (481-528px-Overflow-Zone,
 * min-width:0 auf .cl-index-teaser, s. followups.md Bucket O).
 * Scope: /changelog (Index + Detail-Seite). Keine Kaskaden-Abhaengigkeit zu
 * anderen pages/*.css-Dateien bekannt. */


/* =================================================================
   Changelog / Patch-Notes (web-079)
   Content-Surface analog /glossar. Eigene .cl-*-Klassen (DL-2/DL-9).
   Tokens via var(--*), kein Hex-Hardcode (DL-8).
   ================================================================= */

/* Index-Seite: vertikale Release-Liste (DL-3) */
.cl-index-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.6em;
}
.cl-index-row {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  transition: border-color 0.12s;
}
.cl-index-row:hover {
  border-color: var(--line-2);
}
.cl-index-row .hs-version {
  font-size: 0.9em;
}
.cl-index-date {
  color: var(--muted);
  font-size: 0.85em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-width: 6.5em;
}
.cl-index-teaser {
  /* ui-346: --muted-2 war nirgends in tokens.css definiert → fiel still auf
     `inherit` zurück (= --text, ~14:1 — Teaser las dadurch so hell/prominent
     wie die Versions-Headline statt als Sekundärzeile). Auf --muted (bereits
     für .cl-index-date im selben Row-Layout genutzt) umgestellt. */
  color: var(--muted);
  font-size: 0.9em;
  /* Bucket-O-Fix (followups.md, aus ui-463-Review, absorbiert in web-241):
     flex:1 OHNE min-width:0 gab dem Flex-Item einen harten Minimum-Content-
     Boden bei seiner ungewrappten Text-Breite (Flex-Item-Default
     min-width:auto) — in der 481-528px-Zone (zwischen dem ui-463-480px-Fix
     unten und dem Punkt, ab dem der Teaser-Text "zufaellig" wieder passt)
     lief die Seite dadurch real horizontal ueber (48px Overflow bei 481px,
     gemessen im Review — kein reiner visueller Squeeze). min-width:0 erlaubt
     das Schrumpfen bis zum Wort-Umbruch, wie es .cl-index-row (ohne
     flex-wrap ausserhalb des 480px-Blocks) ohnehin schon fuer Zeilenumbruch
     braucht. */
  flex: 1;
  min-width: 0;
}
.cl-index-counts {
  display: flex;
  gap: 0.5em;
  font-size: var(--fs-caption); /* ui-505 (M3): 0.72em (~10.8px, 0.72em-Treppe) -> --fs-caption (K1) */
}
.cl-count {
  padding: 0.05em 0.45em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}

/* Per-Version-Seite: Breadcrumb / Titel / Meta (DL-4) */
.cl-breadcrumb {
  color: var(--muted);
  font-size: 0.85em;
  margin-bottom: 0.6em;
}
.cl-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.cl-breadcrumb a:hover {
  color: var(--cyan);
}
.cl-title {
  font-size: 1.6em;
  color: var(--cyan);
  margin: 0 0 0.15em;
}
.cl-meta {
  color: var(--muted);
  font-size: 0.85em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-bottom: 1.6em;
}

/* Sektionen (DL-4/5) */
.cl-body .cl-section {
  margin: 1.6em 0;
}
.cl-body .cl-section h2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.02em;
  margin: 0 0 0.5em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
}
.cl-body .cl-section ul {
  margin: 0.3em 0;
  padding-left: 1.2em;
}
.cl-body .cl-section li {
  margin: 0.35em 0;
  color: var(--text);
}
.cl-body .cl-section li code {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}

/* Kategorie-Label-Chips (DL-5) — kleine Cues, kein Voll-Anstrich.
   Bewusst: Neu=grün (neu=positiv), Fix=cyan (Primär), Balance=gelb (Tuning),
   Haube=muted (neutral). Wort steht im Chip → nicht nur Farbe für A11y.
   ui-505 (M3): 0.62em war via .cl-section-h2-Vorfahre (1.02em) effektiv
   ~9,49px (DOM-verifiziert, ui-489-audit.md) — kein 0.72em-Treppen-Fall,
   sondern eigener Ancestor-Ketten-Fund (Audit-Bucket "Companion-Rest",
   Datei sonst nicht von M1/M2/M4 abgedeckt). --fs-caption ist rem-/root-
   basiert und bricht die em-Kette bewusst (K1, Chip ist einzige Text-
   Quelle der Kategorie, s.o. "nicht nur Farbe"). */
.cl-cat {
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
  white-space: nowrap;
}
.cl-cat--neu {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.cl-cat--fix {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}
.cl-cat--balance {
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 40%, transparent);
}
.cl-cat--haube {
  color: var(--muted);
  border-color: var(--line-2);
}

/* Prev/Index/Next-Navigation (DL-6) */
.cl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: 0.9em;
}
.cl-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.cl-nav a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.cl-nav .disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  opacity: 0.3;
  pointer-events: none;
}

/* --- ≤480px: Phone-Stufe (ui-463 Hotfix, s. Kanon-Kommentar in der Mobile-Sektion) ---
   .cl-index-row war NIE fuer schmale Viewports gebaut: starrer Einzeiler
   (Badge + Datum-Spalte min-width:6.5em + Teaser flex:1 + optionale Chips,
   kein flex-wrap) — auf einem Phone-Breite bleibt dem Teaser nur ein
   schmaler Rest, Fliesstext bricht in 1-2-Wort-Zeilen um (Fifty-PTR-Fund,
   Ticket-Screenshot). Fix stapelt EINSPALTIG: Badge+Datum bleiben Kopf-
   zeile (Datum rechtsbuendig per margin-left:auto), Teaser + Chips (falls
   vorhanden) erzwingen je eine eigene volle Zeile ueber den robusten
   Flex-Wrap-Trick "flex-basis:100% kann nie in eine bestehende Zeile
   passen" — kein Markup-/Grid-Umbau noetig (der ui-463-Diff selbst blieb
   bewusst klein; die strukturelle Absorption in die pages-Struktur kam
   mit web-241, s. Datei-Kopfkommentar).

   Media-Query-Basis = Viewport (kein Container-/Element-Query): die
   Karte laeuft in ZWEI Kontexten — (a) Standalone /changelog, echte
   Top-Level-Seite, Breite = Viewport; (b) Mobile-Viewer-Embed
   (?embed=1, ueber web/client/surfaces/surface-host.js in
   #mob-surface-mount gemountet). surface-host.js ist explizit KEIN
   iframe (eigener Kopfkommentar dort: "kein iframe mehr, der Mount ist
   kein eigenstaendiges Dokument mehr") — der Mount ist ein normales
   Flex-Kind (#screen-surface{flex:1 1 auto}, client/css/companion/
   pages/dashboard.css seit web-241 .embed-surface.ct-embed-mount{width:100%}),
   das 1:1 mit dem echten
   Browser-Viewport mitschrumpft, nur reduziert um eigene Innen-Paddings
   (kein schmalerer Container dazwischen). Empirisch verifiziert (CDP,
   390px-Mobile-Viewport, echter Profil→Patch-Notes-Tap im Viewer):
   .cl-index-row rendert dort bei effektiv ~327px Breite — deutlich unter
   der Kanon-Phone-Stufe. Ein Viewport-@media ist damit fuer BEIDE
   Kontexte akkurat; 480px (statt der im Ticket nur ALS GROBE ANNAEHERUNG
   genannten "~520px") gewaehlt, weil es 1:1 der bestehenden Drei-Stufen-
   Konvention entspricht (Kanon-Kommentar: "Neue Regeln ab ui-214 nutzen
   nur die drei kanonischen Stufen") UND jedes reale Phone (390-430px)
   sicher abdeckt — es gibt keine Geraete-Luecke zwischen 480px und der
   naechsten Kanon-Stufe (768px Tablet), die einen eigenen Zwischenwert
   noetig gemacht haette. */
@media (max-width: 480px) {
  .cl-index-row {
    flex-wrap: wrap;
    row-gap: 0.4em;
  }
  .cl-index-date {
    margin-left: auto; /* rechtsbuendig neben dem Badge, wie ein Kartenkopf */
  }
  .cl-index-teaser,
  .cl-index-counts {
    flex-basis: 100%; /* erzwingt je eine eigene volle Zeile (Flex-Wrap-Trick) */
  }
}