/* Der Changelog der Dev-Konsole. Gehoert zu public/devchangelog.js.
   Alle Klassen tragen das Praefix dcl-.

   Diese Datei haengt an KEINER Zeile in index.html: devchangelog.js setzt den
   Verweis selbst (stilSichern). Damit ist index.html eine Datei weniger, in
   der sich zwei parallel arbeitende Spuren treffen koennen - und das ist hier
   der ganze Zweck der Uebung.

   ------------------------------------------------------------------------
   ZWEI SORTEN MUESSEN AUF EINEN BLICK VERSCHIEDEN SEIN.
   Ein Commit ist eine Tatsache, eine Paketmarke ein Wunsch. Wer die beiden
   verwechselt, liest aus zeitlicher Naehe eine Erledigung ab, die niemand
   behauptet hat. Der Unterschied steht darum NICHT nur in der Farbe:
     Commit  - schlichte Zeile auf dem Seitengrund, Kennung in Schreibmaschine
     Paket   - eigener Grund (surface-2), voller Rahmen, Inhaltsliste offen
   Farbe allein waere zu wenig; WCAG 1.4.1 verlangt fuer eine Bedeutung mehr
   als nur Farbe, und der haeufigste Fall von Farbenfehlsichtigkeit trifft
   ausgerechnet die Unterscheidung, die man hier intuitiv waehlen wuerde.

   ------------------------------------------------------------------------
   DIE SECHS SPURFARBEN sind keine freien Werte, sondern die Ink-Marken des
   Hauses: accent-fg, good-ink, warning-ink, serious-ink, critical-ink und
   text-secondary. Sie sind bereits als TEXTFARBEN gerechnet und in beiden
   Themen ueber 4,5:1 gegen die Flaechen dieser Ansicht - nachgerechnet steht
   das im Kopf von devkonsole.css fuer dieselben Paare. Ein eigener
   Farbenkatalog waere eine zweite Wahrheit ueber die Marke.

   Die Spur ist zusaetzlich eine KANTE links. Wer Farben nicht unterscheidet,
   sieht wenigstens den Namen - er steht ausgeschrieben an jeder Zeile.

   ------------------------------------------------------------------------
   KEINE ZAHL NEBEN EINEM NAMEN. Es gibt in dieser Datei bewusst keine Klasse
   fuer einen Zaehler je Person, keine Balken, keine Rangliste. Die Begruendung
   steht in src/routes/devchangelog.js; sie ist keine Gestaltungsfrage. */

.dcl {
  display: flex;
  flex-direction: column;
  gap: var(--luft-block);
  font-size: var(--fs-md);
  color: var(--text-primary);
}

/* ----------------------------------------------------------------- Kopf */

.dcl-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng);
}

.dcl-quelle {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--luft-eng);
}

/* Die Warnung faellt auf, ohne zu schreien: Sie sagt "unvollstaendig", nicht
   "kaputt". Ein roter Alarm an dieser Stelle wuerde jemanden mitten in der
   Arbeit auf eine Stoerung schicken, die keine ist. */
.dcl-warnung {
  margin: 0;
  padding: var(--luft-eng) var(--luft-liste);
  border-left: 3px solid var(--warning);
  background: var(--surface-sunken);
  color: var(--warning-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
}

/* Faellt die Quelle ganz aus, ist das eine Stoerung - und dann darf es auch
   danach aussehen. Der Fall ist genau der, den die Ansicht NICHT als leere
   Liste zeigen darf. */
.dcl-stoerung {
  padding: var(--luft-liste);
  border: 1px solid var(--critical);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--critical-ink);
}

.dcl-stoerung p {
  margin: var(--luft-eng) 0 0;
  color: var(--text-secondary);
}

.dcl-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-eng);
  align-items: center;
}

.dcl-suche {
  flex: 1 1 220px;
  min-width: 0;
}

.dcl-suche,
.dcl-autoren,
.dcl-sorten,
.dcl-neu {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}

.dcl-neu {
  cursor: pointer;
}

.dcl-neu:hover {
  border-color: var(--accent);
  color: var(--accent-fg);
}

.dcl-suche:focus-visible,
.dcl-autoren:focus-visible,
.dcl-sorten:focus-visible,
.dcl-neu:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Der Satz ueber die Nicht-Verknuepfung. Leise, aber immer da. */
.dcl-satz {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- Achse */

.dcl-achse {
  display: flex;
  flex-direction: column;
  gap: var(--luft-abschnitt);
}

.dcl-tag {
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng);
}

.dcl-tagkopf {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  position: sticky;
  top: 0;
  background: var(--surface-1);
  z-index: 1;
}

.dcl-eintrag {
  border-left: 3px solid var(--border-strong);
  padding: var(--luft-eng) 0 var(--luft-eng) var(--luft-liste);
}

.dcl-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--luft-eng);
  font-size: var(--fs-xs);
}

.dcl-uhr {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dcl-autor {
  font-weight: 600;
}

.dcl-hash {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-muted);
}

.dcl-marke {
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
}

.dcl-marke-paket {
  border-color: var(--accent);
  color: var(--accent-fg);
}

.dcl-betreff {
  margin: 2px 0 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dcl-leise {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.dcl-leer {
  margin: 0;
  padding: var(--luft-abschnitt) 0;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------- Dateien */

.dcl-dateien {
  margin-top: 4px;
  font-size: var(--fs-xs);
}

.dcl-dateien > summary {
  cursor: pointer;
  color: var(--text-muted);
}

.dcl-dateien > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dcl-dateiliste {
  margin: 4px 0 0;
  padding-left: var(--luft-block);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Paket */

.dcl-paket {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--luft-liste);
}

.dcl-paket .dcl-betreff {
  font-weight: 600;
}

.dcl-inhalt {
  margin: 4px 0 0;
  padding-left: var(--luft-block);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.dcl-inhalt li {
  margin-bottom: 2px;
}

/* Die Art eines Wunsches (Fehler, Frage) steht nur da, wenn sie NICHT der
   Normalfall ist - sonst traegt jede Zeile dasselbe Wort und niemand liest
   es mehr. */
.dcl-art {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------- Die Spuren */

.dcl-spur-0 { border-left-color: var(--accent-fg); }
.dcl-spur-1 { border-left-color: var(--good-ink); }
.dcl-spur-2 { border-left-color: var(--serious-ink); }
.dcl-spur-3 { border-left-color: var(--warning-ink); }
.dcl-spur-4 { border-left-color: var(--critical-ink); }
.dcl-spur-5 { border-left-color: var(--text-secondary); }

.dcl-spur-0 .dcl-autor { color: var(--accent-fg); }
.dcl-spur-1 .dcl-autor { color: var(--good-ink); }
.dcl-spur-2 .dcl-autor { color: var(--serious-ink); }
.dcl-spur-3 .dcl-autor { color: var(--warning-ink); }
.dcl-spur-4 .dcl-autor { color: var(--critical-ink); }
.dcl-spur-5 .dcl-autor { color: var(--text-secondary); }

/* --------------------------------------------------------------- Am Handy */

@media (max-width: 640px) {
  .dcl-hash {
    margin-left: 0;
  }
  .dcl-werkzeuge {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Hier gibt es ohnehin keine
   Animation - der Aufklapper der Dateiliste ist die einzige Bewegung, und die
   macht der Browser. Die Regel steht trotzdem da, damit sie beim naechsten
   Anbau nicht vergessen wird. */
@media (prefers-reduced-motion: reduce) {
  .dcl * {
    transition: none;
  }
}