/* Der Faecher - Gestaltung zu public/devfaecher.js.

   WAS DAS IST: Die Anzeige fuer den Moment, in dem der Mittelsmann eine
   Anfrage auf mehrere Modelle verteilt. Sie steht MITTEN IM GESPRAECH der
   Dev-Konsole, also in einer Spalte zwischen 320 und 1100 Pixel Breite
   (PANEL_MIN/PANEL_MAX in devkonsole-schale.js). Jede Regel hier ist gegen
   die 320 gerechnet, nicht gegen die 1100 - was am schmalen Ende steht,
   steht am breiten erst recht.

   EIGENE DATEI, EIGENES PRAEFIX (dkf-), aus demselben Grund wie
   devauswahl.css: Es gibt kein devkonsole.css, und diese Datei zieht das
   nicht nach. Sie gestaltet ausschliesslich den Faecher. Ein Stylesheet, an
   dem drei Fronten gleichzeitig arbeiten, ist die Ursache des Namensstreits
   dk-/dks- gewesen.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Groessen ueber --fs-*, Abstaende ueber --luft-*. Keine neue
   Farbe, keine neue Schrift.

   ------------------------------------------------------------------------
   KONTRAST, NACHGEMESSEN STATT NACHGERECHNET (hell/dunkel).

   Die Zahlen unten stammen nicht aus dieser Datei, sondern aus dem Browser:
   An jedem wirklich gezeichneten Element wurden Vordergrund und die naechste
   DECKENDE Flaeche darunter mit getComputedStyle abgeholt und mit der
   WCAG-Formel (relative Luminanz, sRGB) verrechnet, einmal je Thema. Der
   Umweg lohnt sich, weil --good-ink und --critical-ink aus color-mix
   entstehen: Was dabei herauskommt, weiss erst der Browser, und eine Zahl
   aus dem Kopf haette hier genau die Farben verfehlt, die den Zustand einer
   Zeile tragen. Zwei der frueheren Schaetzungen lagen daneben (Uneinig und
   die Byte-Angabe standen ueber der falschen Flaeche).

     text-primary   auf surface-2      16,78:1 / 14,65:1   Titel, Haltung
     text-primary   auf surface-1      16,40:1 / 16,06:1   Antworttext, Frage
     text-secondary auf surface-2       7,95:1 /  8,90:1   Zaehlzeile, Modell einer Seite
     text-secondary auf surface-1       7,77:1 /  9,76:1   Auftrag, Modell, Wahl
     text-muted     auf surface-1       5,52:1 /  5,16:1   Dauer, Rappen, Byte-Angabe
     text-muted     auf surface-2       5,65:1 /  4,71:1   Uhr, Summe, Assetzeile
     accent-fg      auf surface-1       6,52:1 /  9,65:1   Mehr/Weniger, Zustand Laeuft
     good-ink       auf surface-1       6,70:1 /  6,70:1   Zustand Fertig
     critical-ink   auf surface-1       8,69:1 /  5,70:1   Zustand Gescheitert, Fehler
     warning-ink    auf surface-1       5,90:1 /  9,71:1   Ueberschrift Uneinig
     accent-fg      auf accent-soft     6,16:1 /  8,82:1   gedrueckter Knopf, Fokus
     text-primary   auf surface-sunken 14,05:1 / 16,72:1   Quelltext

   Alle Textpaare liegen ueber 4,5:1; der niedrigste ist 4,71:1 (Uhr und
   Summe im Dunkelmodus).

   UND DIE WERTE, DIE NICHT BESTEHEN, samt Begruendung:
     --border als Trennlinie            1,3:1 - 1,4:1
   Das sind Kanten von Flaechen, kein Text und kein Bedienelement. Der
   farbige Streifen links an jeder Laufzeile ist ebenfalls kein Merkmal, das
   fuer sich stehen muesste: In DERSELBEN Zeile steht der Zustand als WORT
   (Wartet, Laeuft, Fertig, Gescheitert, Abgebrochen), und dieses Wort traegt
   die Aussage allein - auf Papier, im Schwarzweissausdruck und fuer eine
   Sprachausgabe. Der Streifen ist die Abkuerzung fuer das Auge, nicht die
   Auskunft.

   Geladen in index.html nach styles.css, und in der SHELL-Liste von
   public/sw.js. */

/* ================================================================ Der Block */

.dkf {
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste, 12px);
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}

/* Der Kopf. Umbricht, statt zu quetschen: Bei 320px stehen Titel und
   Zaehlzeile untereinander, und beide sind ganz zu lesen. Eine Kopfzeile,
   die ihre Zahlen abschneidet, ist genau die Zeile, wegen der man sie
   gebaut hat. */
.dkf-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.dkf-titel {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.dkf-zaehler {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.dkf-uhr,
.dkf-summe {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Die Summe steht ganz rechts und damit am weitesten weg vom Titel: sichtbar,
   aber nicht im Weg. Sie erscheint erst am Ende des Laufs - warum, steht in
   devfaecher.js beim Kopf. */
.dkf-summe { margin-left: auto; }

.dkf-abbruch {
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}

.dkf-abbruch:hover { background: var(--surface-sunken); }
.dkf-abbruch:disabled { cursor: default; color: var(--text-muted); }

/* ================================================================ Die Leiste */

.dkf-leiste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Zwei Spalten, zwei Zeilen: links Auftrag ueber Modell, rechts Zustand ueber
   Dauer und Rappen. Bei 320px Panelbreite bleibt fuer den Modellnamen etwa
   die Haelfte - genug fuer 'deepseek-v4-flash', zu wenig fuer den vollen
   Pfad, darum bricht er um statt zu verschwinden. Ein abgeschnittener
   Modellname ist in einer Kostenanzeige die falsche Sparsamkeit. */
.dkf-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  padding: 6px 8px 6px 11px;
  background: var(--surface-1);
  border-radius: 8px;
  border-left: 3px solid var(--border-strong);
}

.dkf-auftrag {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.dkf-stand {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: right;
}

.dkf-modell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.dkf-mass {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Die Zustandsfarben. Sie stehen am Streifen UND am Wort - dasselbe Signal
   zweimal, damit das Auge die Zeile findet und der Text sie beantwortet. */
.dkf-zeile[data-stand="wartet"] { border-left-color: var(--border-strong); }
.dkf-zeile[data-stand="wartet"] .dkf-stand { color: var(--text-muted); }

.dkf-zeile[data-stand="laeuft"] { border-left-color: var(--accent-fg); }
.dkf-zeile[data-stand="laeuft"] .dkf-stand { color: var(--accent-fg); }

.dkf-zeile[data-stand="fertig"] { border-left-color: var(--good-ink); }
.dkf-zeile[data-stand="fertig"] .dkf-stand { color: var(--good-ink); }

.dkf-zeile[data-stand="gescheitert"] { border-left-color: var(--critical-ink); }
.dkf-zeile[data-stand="gescheitert"] .dkf-stand { color: var(--critical-ink); }

.dkf-zeile[data-stand="abgebrochen"] { border-left-color: var(--text-muted); }
.dkf-zeile[data-stand="abgebrochen"] .dkf-stand { color: var(--text-muted); }

/* Nur der Streifen atmet, und nur bei 'laeuft'. Das ist die einzige Bewegung
   in dieser Datei: Sie beantwortet aus dem Augenwinkel die Frage, ob ueberhaupt
   noch etwas passiert - bei vier Zeilen findet man die arbeitenden sonst nur
   durch Lesen. Kein Kreisel, kein Balken: Beides behauptet Fortschritt, den
   niemand kennt. */
@keyframes dkf-atem {
  50% { border-left-color: var(--border-strong); }
}

.dkf-zeile[data-stand="laeuft"] {
  animation: dkf-atem 1.6s ease-in-out infinite;
}

/* ================================================================ Der Streit */

.dkf-streit {
  padding: 10px;
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng, 8px);
}

.dkf-streit h4 {
  margin: 0;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--warning-ink);
}

.dkf-streitfall {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dkf-streitfrage {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

/* NEBENEINANDER, SOBALD ES GEHT. Das ist der einzige Ort in dieser Datei, an
   dem zwei Texte um dieselbe Breite streiten - und hier ist es der Zweck:
   Zwei Haltungen untereinander liest man nacheinander, zwei nebeneinander
   vergleicht man. Unter etwa 400px Panelbreite passen zwei Spalten mit
   180px nicht mehr, dann stapeln sie - lieber untereinander als in zwei
   Spalten mit vier Buchstaben. */
.dkf-seiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.dkf-seite {
  padding: 8px;
  background: var(--surface-2);
  border-radius: 6px;
  border-top: 2px solid var(--border-strong);
}

.dkf-seite-modell {
  margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.dkf-seite-text {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================================== Die Blaetter */

.dkf-blaetter {
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng, 8px);
}

.dkf-blatt {
  padding: 8px 10px;
  background: var(--surface-1);
  border-radius: 8px;
}

.dkf-blatt-kopf {
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

/* Der ganze Kopf ist der Knopf: eine Klickflaeche ueber die volle Breite
   statt eines Woertchens am Rand. Wer eine Antwort aufklappen will, zielt
   auf ihre Ueberschrift. */
.dkf-blatt-knopf {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  width: 100%;
  padding: 4px;
  margin: -4px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  /* Am Handy wird hier mit dem Daumen getippt. */
  min-height: 44px;
}

.dkf-blatt-knopf:hover { background: var(--surface-sunken); }

.dkf-blatt-knopf:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 1px;
  background: var(--accent-soft);
}

.dkf-blatt-wort {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--accent-fg);
}

/* DER TEXT STEHT IMMER VOLLSTAENDIG IM DOKUMENT. Zugeklappt beschneidet ihn
   das Stylesheet auf zwei Zeilen - der Code fasst ihn nicht an. Damit steht
   ohne dieses Stylesheet alles da, und die zwei sichtbaren Zeilen sind
   garantiert der echte Anfang und keine Nacherzaehlung. */
.dkf-blatt-text {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dkf-blatt-text[data-dkf-offen="0"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.dkf-blatt-fehler {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--critical-ink);
}

/* ================================================================ Die Assets */

.dkf-assets {
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng, 8px);
}

.dkf-assets h4 {
  margin: 0;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.dkf-assetkopf {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.dkf-assetliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--luft-eng, 8px);
}

.dkf-asset {
  padding: 8px;
  background: var(--surface-1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Der Bildhalter hat eine Hoehenkappe. Ein Bild aus einem Modell ist
   1024 Pixel hoch; in einer 320er Spalte waere das die halbe Bildschirmhoehe
   fuer EIN Stueck, und der Lauf darunter waere nicht mehr zu finden. */
.dkf-assetbild {
  display: flex;
  justify-content: center;
  background: var(--surface-sunken);
  border-radius: 6px;
  padding: 6px;
  max-height: 320px;
  overflow: auto;
}

.dkf-vorschau {
  max-width: 100%;
  max-height: 300px;
  height: auto;
  object-fit: contain;
}

.dkf-quelltext {
  margin: 0;
  padding: 8px;
  max-height: 240px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border-radius: 6px;
  white-space: pre;
}

.dkf-assetzeile {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.dkf-assetknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dkf-assetknoepfe button {
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
}

.dkf-assetknoepfe button:hover:not(:disabled) { background: var(--surface-sunken); }

.dkf-assetknoepfe button:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 1px;
}

/* Ein gedrueckter Zustand, kein ausgegrauter: Der Knopf sagt "das ist schon
   so" und nicht "das geht nicht". */
.dkf-assetknoepfe button:disabled {
  cursor: default;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-color: var(--accent-fg);
}

.dkf-assetwahl {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.dkf-asset[data-wahl="behalten"] { border-left: 3px solid var(--good-ink); }

/* VERWORFEN HEISST ZUSAMMENGEKLAPPT, NICHT GELOESCHT. Vorschau und Quelltext
   verschwinden, die Zeile mit Namen und Kosten bleibt, und 'Behalten' holt
   alles zurueck. Der Grund steht in devfaecher.js: Ein Fehlgriff kostet
   sonst das einzige Vorkommen eines Bildes, das gerade fuenf Rappen gekostet
   hat. */
.dkf-asset[data-wahl="verworfen"] { border-left: 3px solid var(--text-muted); }
.dkf-asset[data-wahl="verworfen"] .dkf-assetbild,
.dkf-asset[data-wahl="verworfen"] .dkf-quelltext,
.dkf-asset[data-wahl="verworfen"] .dkf-blatt-kopf { display: none; }
.dkf-asset[data-wahl="verworfen"] .dkf-assetzeile { color: var(--text-muted); }

/* ================================================================ Der Fehler */

.dkf-fehler {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--critical-ink);
}

/* --------------------------------------------------------- Ruhe vor Bewegung */

@media (prefers-reduced-motion: reduce) {
  .dkf-zeile[data-stand="laeuft"] { animation: none; }
}