/* Die sichtbaren Uebergaben - Gestaltung zu public/devuebergaben.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 du-.

   DIE EINE ENTSCHEIDUNG, DIE HIER SICHTBAR WIRD

   Der Zustand einer Uebergabe wird auf DREI Wegen gleichzeitig gezeigt:
     1. ein Wort im Kopf der Karte ("unterwegs" / "ausgegeben"),
     2. ein voller Satz darunter, der sagt, was das Wort bedeutet,
     3. eine farbige Kante links.
   Farbe allein taete es nicht: Sie ueberlebt weder Farbenblindheit noch eine
   Vorlesehilfe noch einen Schwarzweissausdruck. Und gerade hier haengt an
   der Unterscheidung eine Entscheidung - "unterwegs" heisst Finger weg.

   Dasselbe beim Riegel: Rot, Gelb und Gruen tragen JE einen eigenen Satz.
   Der gruene Fall ("nichts gefunden") hat ausdruecklich auch eine Meldung.
   Ein Kasten, der nur bei Gefahr etwas sagt, laesst offen, ob ueberhaupt
   geprueft wurde.

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

/* ====================================================== Das Fach */

.du-fach {
  display: flex;
  flex-direction: column;
  gap: var(--luft-block, 16px);
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.du-still {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.du-fehler {
  color: var(--critical-ink, var(--critical));
  background: color-mix(in srgb, var(--critical) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--critical) 35%, var(--border));
  border-radius: 8px;
  padding: 12px;
  font-size: var(--fs-sm);
}

.du-leer {
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: var(--fs-sm);
}

/* ====================================================== Der Riegel */

.du-riegel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.du-riegel > label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.du-riegel-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

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

.du-riegel-antwort {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  /* Links eine Kante, damit der Zustand auch ohne Farbwahrnehmung
     unterscheidbar bleibt: die drei Faelle tragen verschiedene Breiten. */
  border-left: 3px solid var(--border);
  background: var(--surface-1);
}

.du-riegel-antwort p { margin: 0 0 4px; }
.du-riegel-antwort p:last-child { margin-bottom: 0; }

.du-riegel-antwort.du-stopp {
  border-left-width: 6px;
  border-left-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-1));
  color: var(--critical-ink, var(--text-primary));
  font-weight: 600;
}

.du-riegel-antwort.du-achtung {
  border-left-width: 4px;
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  color: var(--warning-ink, var(--text-primary));
}

.du-riegel-antwort.du-frei {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
  color: var(--good-ink, var(--text-secondary));
}

.du-riegel-antwort.du-still {
  border-left-color: var(--border);
  color: var(--text-muted);
}

.du-riegel-liste {
  margin: 4px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 400;
}

.du-riegel-liste b { font-weight: 600; }

/* ====================================================== Kopfzeile */

.du-kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.du-kopfzeile h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.du-neu {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent-fg);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.du-neu:hover { background: var(--accent-soft); }

/* ====================================================== Die Karten */

.du-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.du-karte {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
}

/* Unterwegs ist der laute Fall: daran arbeitet gerade jemand. */
.du-karte[data-zustand="unterwegs"] { border-left-color: var(--warning); }
.du-karte[data-zustand="ausgegeben"] { border-left-color: var(--good); }

.du-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.du-nummer {
  font-weight: 700;
  font-size: var(--fs-lg);
}

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

.du-wann {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.du-marke {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface-2);
}

.du-karte[data-zustand="unterwegs"] .du-marke {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-1));
  color: var(--warning-ink, var(--text-primary));
}

.du-karte[data-zustand="ausgegeben"] .du-marke {
  border-color: color-mix(in srgb, var(--good) 40%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--surface-1));
  color: var(--good-ink, var(--text-secondary));
}

.du-satz {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* ------------------------------------------------------ Der Inhalt */

/* Der Kern der Ansicht. Darum: eigener Grund, damit die Titel als Block
   ins Auge fallen, und keine Aufzaehlungszeichen - die Titel sind die
   Aufzaehlung. */
.du-inhalt {
  list-style: none;
  margin: 12px 0 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-sunken);
  border-radius: 8px;
}

.du-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.du-wunsch {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: pointer;
}

.du-wunsch:hover { background: var(--surface-1); }

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

.du-art {
  flex: none;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  min-width: 4.5em;
}

.du-titel { font-weight: 600; }

.du-kurz {
  margin: 0 0 0 calc(4.5em + 12px);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.du-voll {
  margin: 4px 0 4px calc(4.5em + 12px);
  padding: 8px 12px;
  background: var(--surface-1);
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
}

.du-voll p { margin: 0 0 8px; white-space: pre-wrap; }
.du-voll p:last-child { margin-bottom: 0; }

.du-voll h5 {
  margin: 8px 0 4px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* Ein unterdruecktes Feld ist kein Schoenheitsfehler, sondern eine Aussage.
   Darum sichtbar und nicht klein und grau. */
.du-unterdrueckt {
  margin: 2px 0 0 calc(4.5em + 12px);
  font-size: var(--fs-xs);
  color: var(--critical-ink, var(--critical));
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-1));
  border-radius: 6px;
  padding: 4px 8px;
}

.du-fehlend {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ------------------------------------------------------ Der Fuss */

.du-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.du-datei {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  /* Dateiname, Groesse und die zwoelf Zeichen der Pruefsumme - dieselbe
     Schreibweise wie auf dem gedruckten Beleg. */
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.du-holen {
  flex: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.du-holen:hover { filter: brightness(1.08); }

.du-holen:disabled {
  background: var(--border-strong);
  cursor: default;
}

.du-holen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ====================================================== Schmale Schirme */

/* In der Konsole ist die Spalte oft nur gut 320px breit. Dann kostet die
   Einrueckung unter den Titeln mehr, als sie ordnet. */
@media (max-width: 520px) {
  .du-kurz,
  .du-voll,
  .du-unterdrueckt {
    margin-left: 0;
  }

  .du-wunsch { flex-wrap: wrap; }

  .du-marke { margin-left: 0; }
}