/* Der geteilte Verlauf - Gestaltung zu public/devverlauf.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Schriftgroessen ueber --fs-xs..--fs-xl, Radien 8/12px,
   Abstaende in 4/8/12/16px. Keine neuen Farben, keine neuen Groessen.
   Alle Klassen tragen das Praefix dvv-.

   DIE EINE ENTSCHEIDUNG, DIE HIER SICHTBAR WIRD

   Eine Zeile der Maschine sieht anders aus als eine Zeile eines Menschen.
   Das ist die harte Anforderung des Auftrags, und sie wird hier auf DREI
   Wegen gleichzeitig gehalten, nicht auf einem:

     1. ein Wort ("KI") samt Modellname im Kopf der Zeile - lesbar auch
        vorgelesen, auch schwarzweiss ausgedruckt,
     2. eine eigene Kante links in --accent,
     3. ein eigener, leicht abgesetzter Grund.

   Warum nicht nur die Farbe: Farbe allein ueberlebt weder Farbenblindheit
   noch eine Vorlesehilfe noch einen Ausdruck. Wer sich beim Bauen auf sie
   allein verlaesst, hat die Unterscheidung fuer einen Teil der Leute gar
   nicht gemacht - und genau bei dieser Unterscheidung darf das nicht sein.

   Geladen in index.html nach styles.css. */

/* ============================================================ Rahmen */

/* Der Faden bringt KEINEN eigenen Rahmen und KEINEN eigenen Grund mit -
   dieselbe Entscheidung wie in aufgaben.css. Er wird in ein Fach der
   Dev-Konsole gezeichnet, das seinen Rahmen schon hat; braechte er einen
   zweiten mit, saesse ueberall eine Karte in einer Karte. */
.dvv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  position: relative;
  color: var(--text-primary);
}

/* ============================================================== Kopf */

.dvv-kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dvv-titel {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.dvv-werkzeuge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dvv-warnung {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.dvv-knopf {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dvv-knopf:hover { border-color: var(--border-strong); }

.dvv-knopf.ist-an {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.dvv-tage {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-secondary);
  max-width: 220px;
}

/* ============================================================= Faden */

/* WARUM HIER EINE HOECHSTHOEHE STEHT UND NICHT NUR flex.
   Der Faden braucht einen EIGENEN Rollbereich - ohne ihn gibt es kein "bin
   ich unten?", also auch kein "N neue Zeilen" statt eines Sprungs, und
   "aeltere laden" koennte die Leseposition nicht halten. Ein eigener
   Rollbereich entsteht aber nur, wenn die Hoehe begrenzt ist.
   Das Fach der Konsole (.dks-fach) waechst mit seinem Inhalt; eine Angabe in
   Prozent haette dort nichts, woran sie sich messen koennte. Darum eine
   Hoechsthoehe, die immer gilt - und eine Stellschraube, damit ein Behaelter
   mit fester Hoehe sie ueberschreiben kann, ohne dass jemand diese Datei
   anfassen muss:  --dvv-faden-hoehe. */
.dvv-faden {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: var(--dvv-faden-hoehe, 55dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px 16px;
}

.dvv-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dvv-mehr {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin: 4px 0;
  cursor: pointer;
}

.dvv-mehr:hover { color: var(--text-primary); }

.dvv-leer {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 24px 0;
  text-align: center;
}

/* Der Tag als Trennlinie mit Aufschrift. Ohne ihn ist ein langer Faden eine
   Wand aus Uhrzeiten, in der niemand "letzte Woche" wiederfindet. */
.dvv-tagtrenner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

.dvv-tagtrenner::before,
.dvv-tagtrenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================= Zeile */

.dvv-zeile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: var(--surface-2);
  min-width: 0;
}

.dvv-zkopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dvv-marke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dvv-marke svg { display: block; }

.dvv-markenwort {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dvv-modell {
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.dvv-wer {
  font-weight: 600;
  color: var(--text-secondary);
}

.dvv-wann {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.dvv-leeren {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
}

.dvv-leeren:hover { color: var(--critical); background: var(--surface-sunken); }

/* pre-wrap, damit Absaetze und Einrueckungen stehen bleiben: In einem
   Entwicklergespraech steht in jeder zweiten Zeile ein Dateiname oder ein
   Aufzaehlungszeichen, und beides zerfaellt ohne Zeilenumbrueche.
   overflow-wrap, damit ein langer Pfad die Zeile nicht breiter macht als
   den Kasten - sonst scrollt der ganze Faden seitwaerts. */
.dvv-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-primary);
}

/* ---- Die eigene Zeile: erkennbar, aber nicht laut ---- */
.dvv-zeile.ist-meine { border-left-color: var(--border-strong); }

/* ---- Der Wunsch: eine Marke, die man im Ueberflug findet ---- */
.dvv-zeile.ist-wunsch {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 7%, var(--surface-2));
}

.dvv-zeile.ist-wunsch .dvv-markenwort { color: var(--good-ink); }

/* ---- Die Maschine: eigener Grund, eigene Kante, eigenes Wort ---- */
.dvv-zeile.ist-ki {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.dvv-zeile.ist-ki .dvv-marke { color: var(--accent-fg); }
.dvv-zeile.ist-ki .dvv-wer { color: var(--accent-fg); }

/* Der Text der Maschine steht in derselben Schrift wie der eines Menschen -
   mit Absicht. Eine zweite Schriftart wuerde ihn hervorheben statt ihn
   einzuordnen; unterschieden wird ueber Kopf, Kante und Grund, und die
   Lesbarkeit bleibt fuer beide gleich. */

/* ---- Uebergabe: das Paket zeigt, was drinsteckt ---- */
.dvv-zeile.ist-uebergabe {
  border-left-color: var(--series-7);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-7);
}

.dvv-paket {
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-sunken);
}

.dvv-paketname {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.dvv-paketliste {
  margin: 0;
  padding-left: 16px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.dvv-paketleer {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--critical-ink);
}

/* ---- System ---- */
.dvv-zeile.ist-system {
  background: none;
  border-left-color: var(--border);
  color: var(--text-muted);
}

/* ---- Die sichtbare Luecke ---- */
.dvv-zeile.ist-system .dvv-luecke,
.dvv-luecke {
  margin: 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--text-muted);
  /* Gestrichelt statt durchgezogen: Eine Luecke soll wie eine Luecke
     aussehen und nicht wie ein weiterer Inhalt. */
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 4px 8px;
}

.dvv-sprung {
  align-self: flex-start;
  font: inherit;
  font-size: var(--fs-xs);
  background: none;
  border: none;
  color: var(--accent-fg);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ================================================ Marke fuer Neues */

/* Sie liegt UEBER dem Faden, direkt ueber der Eingabe: Wer weiter oben liest,
   soll erfahren, dass etwas dazugekommen ist - aber nicht dorthin gerissen
   werden. Genau das passiert sonst, wenn beide gleichzeitig schreiben. */
.dvv-neumarke {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 96px;
  z-index: 2;
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: var(--shadow);
}

/* ============================================================ Eingabe */

.dvv-eingabe {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-1);
}

.dvv-feld {
  font: inherit;
  font-size: var(--fs-md);
  width: 100%;
  resize: vertical;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text-primary);
}

.dvv-feld:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dvv-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dvv-wunsch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.dvv-zahl {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dvv-zahl.ist-voll { color: var(--critical-ink); }

.dvv-senden {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.dvv-senden:disabled { opacity: .5; cursor: default; }

.dvv-hinweis {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-secondary);
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.dvv-hinweis.ist-fehler {
  color: var(--critical-ink);
  border-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-2));
}

/* ============================================================== Handy */

@media (max-width: 640px) {
  /* Am Handy ist das Panel der Konsole selbst nur --dks-hoehe hoch (Vorgabe
     55dvh). Bliebe der Faden bei seiner Hoechsthoehe von oben, waere er
     allein so hoch wie das ganze Panel - und dann rollte die Buehne der
     Konsole UND der Faden darin. Zwei Rollbereiche uebereinander sind am
     Finger nicht mehr auseinanderzuhalten. */
  .dvv-faden { max-height: var(--dvv-faden-hoehe, 30dvh); }

  .dvv-kopf { grid-template-columns: 1fr; }
  .dvv-werkzeuge { justify-content: flex-start; }
  .dvv-tage { max-width: 100%; flex: 1 1 auto; }
  .dvv-faden { padding: 8px 12px 12px; }
  .dvv-eingabe { padding: 8px 12px; border-radius: 0; }
}

/* Wer die Bewegung abbestellt hat, bekommt keine. Der Faden springt ohnehin
   nur, wenn man selbst geschrieben hat. */
@media (prefers-reduced-motion: reduce) {
  .dvv-faden { scroll-behavior: auto; }
}