/*
 * CUR-115 — Review-Oberfläche, Stilblatt.
 *
 * Plain CSS, keine Präprozessoren, keine Utility-Klassen, keine Webfonts
 * (Abweichung von ADR 0012 E4 — Begründung im Kopf von index.html; der
 * Zielhost lädt keine externen Assets).
 *
 * Die tragende Regel dieser Datei ist nicht Ästhetik, sondern:
 * DIE DREI ZUSTÄNDE MÜSSEN VERSCHIEDEN AUSSEHEN — und zwar auch für jemanden,
 * der Farben nicht unterscheidet. `.tri-offen`, `.tri-leer` und `.tri-wert`
 * tragen deshalb zusätzlich zur Farbe je eine eigene Schriftauszeichnung und
 * einen eigenen Rahmen, und ihr Text schreibt den Zustand ohnehin aus
 * ("[OFFEN — Physio-Review]"). Farbe ist hier Verstärkung, nie Träger der
 * Information — ein Freigabestand, dessen offene Punkte nur an einem Farbton
 * hängen, ist bei 8 % der männlichen Leser kein Freigabestand.
 *
 * Zielbreite 1280 px. Bewusst kein Mobile-First: das ist ein Werkzeug für 2-3
 * Reviewer an Schreibtischen, und der Katalog/Detail-Zweispalter ist auf einem
 * Telefon ohnehin die falsche Form.
 */

:root {
  --grund: #ffffff;
  --flaeche: #f6f7f9;
  --rahmen: #d4d8de;
  --text: #16191d;
  --text-leise: #5b6472;

  --akzent: #1d4ed8;
  --akzent-text: #ffffff;

  /* Offen = die Farbe, die sagt "hier fehlt eine Entscheidung". */
  --offen-rand: #b45309;
  --offen-flaeche: #fff7ed;
  --warn-rand: #b91c1c;
  --warn-flaeche: #fef2f2;
  --ok-rand: #15803d;
  --ok-flaeche: #f0fdf4;

  --radius: 6px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Systemschriften: keine Webfont-Ladung, kein FOUT, kein externer Host. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}

/* Tastaturbedienung: der Fokus muss IMMER sichtbar sein. `:focus-visible`
 * statt `:focus`, damit Mausklicks keinen Rahmen hinterlassen — aber niemals
 * `outline: none` ohne Ersatz. */
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: var(--akzent-text);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.2rem;
}
h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

code {
  font-family: ui-monospace, "Cascadia Code", "Consolas", "Liberation Mono", monospace;
  font-size: 0.86em;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 3px;
  padding: 0.05em 0.3em;
  /* Hashes und Pfade dürfen die Spalte sprengen, nicht die Seite. */
  word-break: break-all;
}

/* --------------------------------------------------------------------------
 * Rahmen
 * ------------------------------------------------------------------------*/

.app {
  max-width: 1600px;
  margin: 0 auto;
}

.boot-hinweis {
  padding: 2rem;
  color: var(--text-leise);
}

.kopf {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--grund);
  border-bottom: 1px solid var(--rahmen);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf-titel {
  display: flex;
  flex-direction: column;
}

.kopf-provenienz {
  font-size: 0.76rem;
  color: var(--text-leise);
  font-family: ui-monospace, "Consolas", monospace;
}

.tabs {
  display: flex;
  gap: 0.25rem;
}

.tab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font: inherit;
  color: var(--text-leise);
}
.tab:hover {
  background: var(--flaeche);
}
.tab-aktiv {
  background: var(--flaeche);
  border-color: var(--rahmen);
  color: var(--text);
  font-weight: 600;
}

.kopf-konto {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-leise);
}

.inhalt {
  padding: 1.25rem;
}

.zentriert {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.karte {
  background: var(--grund);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
}

.hinweis {
  color: var(--text-leise);
  font-size: 0.85rem;
  margin: 0.3rem 0;
}
.hinweis-klein {
  color: var(--text-leise);
  font-size: 0.76rem;
  margin: 0.3rem 0 0;
}
.fehler {
  color: var(--warn-rand);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Formularelemente
 * ------------------------------------------------------------------------*/

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
}

label {
  font-size: 0.85rem;
  font-weight: 500;
}

input[type="text"],
input[type="password"],
select,
textarea {
  font: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 3.5rem;
}

/* Ein gesperrtes Feld MUSS gesperrt aussehen — sonst tippt jemand hinein,
 * wundert sich, und hält es für einen Fehler der Anwendung. */
textarea:disabled {
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: not-allowed;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rahmen);
}

.primaer {
  background: var(--akzent);
  color: var(--akzent-text);
  border-color: var(--akzent);
  font-weight: 600;
}
.primaer:hover {
  filter: brightness(1.1);
}

.sekundaer {
  background: var(--grund);
  color: var(--text);
}
.sekundaer:hover {
  background: var(--flaeche);
}

.login-karte {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Katalogliste
 * ------------------------------------------------------------------------*/

.spalten {
  display: grid;
  /* Feste Listenbreite, Detail nimmt den Rest. `minmax(0, 1fr)` und nicht
   * `1fr`: sonst wächst die Detailspalte an ihrem breitesten Inhalt (ein
   * 64-Zeichen-Hash) über den Bildschirm hinaus und die ganze Seite scrollt
   * waagerecht. */
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.liste {
  background: var(--grund);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 0.85rem;
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-leise);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rahmen);
  margin-bottom: 0.6rem;
}

.filter {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.eintraege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.listen-eintrag {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: var(--grund);
  border: 1px solid var(--rahmen);
  padding: 0.5rem 0.6rem;
}
.listen-eintrag:hover {
  background: var(--flaeche);
}
.listen-eintrag-aktiv {
  border-color: var(--akzent);
  border-left-width: 4px;
  background: var(--flaeche);
}

.eintrag-titel {
  font-weight: 600;
}
.eintrag-id {
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 0.74rem;
  color: var(--text-leise);
}
.eintrag-marker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}
.eintrag-status {
  font-size: 0.72rem;
}

.konflikt-punkt,
.kein-bild-punkt {
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--warn-rand);
  color: var(--warn-rand);
  background: var(--warn-flaeche);
}
.kein-bild-punkt {
  border-color: var(--text-leise);
  color: var(--text-leise);
  background: var(--flaeche);
}

/* --------------------------------------------------------------------------
 * DREI ZUSTÄNDE — der Kern dieses Stilblatts
 *
 * offen  : gestrichelter Rahmen + Kursiv + Warnfarbe → "hier fehlt etwas"
 * leer   : dünner Rahmen + Kursiv + graue Schrift    → "gesetzt, ohne Inhalt"
 * wert   : kein Rahmen, normale Schrift              → "das ist der Inhalt"
 *
 * Drei Achsen (Rahmenstil, Schriftschnitt, Farbe) statt einer. Wer die Farbe
 * nicht sieht, sieht den Rahmen; wer den Rahmen nicht sieht, liest den Text.
 * ------------------------------------------------------------------------*/

.tri {
  display: inline-block;
  /* Freitext aus dem Review darf Absätze haben; sie sollen erhalten bleiben,
   * ohne dass je Markup entsteht (app.js rendert ausschliesslich Textknoten). */
  white-space: pre-wrap;
}

.tri-offen {
  font-style: italic;
  font-weight: 600;
  color: var(--offen-rand);
  background: var(--offen-flaeche);
  border: 1px dashed var(--offen-rand);
  border-radius: 3px;
  padding: 0.02em 0.35em;
}

.tri-leer {
  font-style: italic;
  color: var(--text-leise);
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 3px;
  padding: 0.02em 0.35em;
}

.tri-wert {
  color: var(--text);
}

/* --------------------------------------------------------------------------
 * Detail
 * ------------------------------------------------------------------------*/

.detail-titel {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.detail-meta {
  font-size: 0.78rem;
  color: var(--text-leise);
  margin: 0 0 1rem;
}

.block {
  border-top: 1px solid var(--rahmen);
  padding-top: 0.9rem;
  margin-top: 1.1rem;
}

.felder {
  width: 100%;
  border-collapse: collapse;
}
.felder th {
  text-align: left;
  font-weight: 500;
  color: var(--text-leise);
  vertical-align: top;
  padding: 0.35rem 0.75rem 0.35rem 0;
  width: 16rem;
  font-size: 0.85rem;
}
.felder td {
  padding: 0.35rem 0;
  vertical-align: top;
}
.felder tr + tr th,
.felder tr + tr td {
  border-top: 1px solid var(--flaeche);
}

.schritte {
  margin: 0;
  padding-left: 0;
  /* KEINE Browser-Nummerierung. Die Nummer kommt aus dem Katalog (`step`) und
   * wird als Text gerendert — genau wie im Markdown-Export (markdown.ts:191).
   *
   * Warum das nicht Pedanterie ist: eine automatische <ol>-Nummerierung zählt
   * immer sauber 1,2,3 durch, egal was im Katalog steht. Ein Katalog, der die
   * Schritte 1,2,4 nummeriert, sähe damit korrekt aus — die Lücke wäre exakt
   * dann unsichtbar, wenn ein Reviewer sie finden soll. Die Abfolge ist
   * fachlich bedeutsam; eine abweichende Nummerierung ist selbst ein Befund
   * und darf nicht von der Darstellung glattgezogen werden. */
  list-style: none;
}
.schritte li {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}
.schritt-nr {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  flex-shrink: 0;
}
.schritt-dauer {
  color: var(--text-leise);
  font-style: italic;
}

/* --------------------------------------------------------------------------
 * Konflikte — prominent. Sie sind der Grund, warum dieses Werkzeug existiert.
 * ------------------------------------------------------------------------*/

.konflikte {
  border: 2px solid var(--warn-rand);
  border-radius: var(--radius);
  background: var(--warn-flaeche);
  padding: 0.8rem;
  margin-bottom: 1rem;
}
.konflikte h3 {
  color: var(--warn-rand);
  margin-bottom: 0.6rem;
}
.konflikte-keine {
  font-size: 0.82rem;
  color: var(--text-leise);
  margin-bottom: 1rem;
}

.konflikt + .konflikt {
  border-top: 1px solid var(--warn-rand);
  margin-top: 0.7rem;
  padding-top: 0.7rem;
}
.konflikt-kopf {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.konflikt-text {
  margin: 0 0 0.35rem;
}
.konflikt-beleg {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-leise);
}

/* `severity` sichtbar machen — nicht nur im Wort "WARNUNG"/"HINWEIS".
 *
 * Heute emittiert detectConflicts() (src/domain/import.ts:73) ausschliesslich
 * `warn`; `info` ist im Typ vorgesehen (snapshot.ts:79) und kommt, sobald es
 * die erste nicht-blockierende Feststellung gibt. Beide Fälle hier jetzt zu
 * gestalten kostet vier Zeilen — sie später zu vergessen hiesse, dass ein
 * `info` in der Aufmachung einer Warnung erscheint und die Warnungen entwertet,
 * gegen die es sich abheben soll. */
.konflikt-warn {
  border-left: 4px solid var(--warn-rand);
  padding-left: 0.6rem;
}
.konflikt-info {
  border-left: 4px solid var(--text-leise);
  padding-left: 0.6rem;
}
.konflikt-info .konflikt-kopf {
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
 * Bild / kein Bild
 * ------------------------------------------------------------------------*/

.bild {
  margin: 0 0 1rem;
}
.bild img {
  max-width: 20rem;
  width: 100%;
  height: auto;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.bild figcaption {
  font-size: 0.75rem;
  color: var(--text-leise);
  margin-top: 0.25rem;
}

/* Kein Platzhalter, der wie Inhalt aussieht (Konzept v2.3 §3.3): ein Befund
 * im Text, nicht ein graues Rechteck, das man für ein ladendes Bild hält. */
.kein-bild {
  display: inline-block;
  font-weight: 600;
  font-style: italic;
  color: var(--offen-rand);
  background: var(--offen-flaeche);
  border: 1px dashed var(--offen-rand);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
 * Review-Formular
 * ------------------------------------------------------------------------*/

.review-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}
.review-form > h3 {
  margin-bottom: 0;
}

.tri-feld {
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem 0.75rem;
  margin: 0;
  width: 100%;
  background: var(--grund);
}
.tri-feld legend {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0 0.35rem;
}

.tri-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-bottom: 0.5rem;
}
.tri-option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tri-option input {
  /* Grössere Trefferfläche als der Browser-Default. */
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}
.tri-option label {
  font-weight: 400;
  cursor: pointer;
}

.zustand-zeile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.zustand-zeile select {
  width: 12rem;
}

/* --------------------------------------------------------------------------
 * Versionskonflikt (409) — muss anhalten, nicht dekorieren.
 * ------------------------------------------------------------------------*/

.lock-konflikt {
  border: 2px solid var(--warn-rand);
  background: var(--warn-flaeche);
  border-radius: var(--radius);
  padding: 0.9rem;
  width: 100%;
}
.lock-konflikt h4 {
  color: var(--warn-rand);
  font-size: 1rem;
}
.lock-text {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
}

.lock-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--grund);
  border: 1px solid var(--rahmen);
  margin-bottom: 0.8rem;
}
.lock-tabelle th,
.lock-tabelle td {
  border: 1px solid var(--rahmen);
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.85rem;
}
.lock-tabelle thead th {
  background: var(--flaeche);
  font-size: 0.78rem;
}
/* Abweichende Felder markieren — aber die gleichen NICHT verstecken: der
 * Benutzer muss sehen, worüber er insgesamt entscheidet, nicht nur das Delta. */
.lock-abweichung > th {
  border-left: 4px solid var(--warn-rand);
}
.lock-abweichung > td {
  background: var(--warn-flaeche);
}

.lock-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Kommentare
 * ------------------------------------------------------------------------*/

.kommentare {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kommentar {
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  background: var(--grund);
}
.kommentar-kopf {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
}
.kommentar-zeit {
  color: var(--text-leise);
}
.kommentar-text {
  margin: 0;
  /* Absätze im Kommentar bleiben erhalten — als Text, nie als Markup. */
  white-space: pre-wrap;
}
.kommentar-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.kommentar-form textarea {
  width: 100%;
}

/* --------------------------------------------------------------------------
 * Tabellen (Freezes, Audit)
 * ------------------------------------------------------------------------*/

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  /* Breite Inhalte (Hashes, Payloads) scrollen in ihrem Container, nicht in
   * der Seite. */
  display: block;
  overflow-x: auto;
}
.tabelle th,
.tabelle td {
  border: 1px solid var(--rahmen);
  padding: 0.4rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.tabelle thead th {
  background: var(--flaeche);
  font-size: 0.78rem;
  white-space: nowrap;
}

.hash {
  font-size: 0.72rem;
  max-width: 16rem;
  display: inline-block;
}

.kennzahlen-tabelle {
  margin-bottom: 1rem;
}
.kennzahlen-tabelle td {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.export-zelle {
  white-space: nowrap;
}
.export-link {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--akzent);
}

.abgeloest {
  color: var(--text-leise);
  font-style: italic;
}
.aktiv {
  color: var(--ok-rand);
  font-weight: 600;
}

.freeze-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}
.freeze-form .feld {
  margin-bottom: 0;
  width: 14rem;
}

/* --------------------------------------------------------------------------
 * Audit-Kette
 * ------------------------------------------------------------------------*/

.kette {
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  margin: 0 0 1rem;
}
.kette-ok {
  border: 1px solid var(--ok-rand);
  background: var(--ok-flaeche);
  color: var(--ok-rand);
}
/* Eine gebrochene Kette ist der lauteste Befund der Anwendung. Sie darf nicht
 * wie eine Statuszeile aussehen. */
.kette-gebrochen {
  border: 2px solid var(--warn-rand);
  background: var(--warn-flaeche);
  color: var(--warn-rand);
}
.kette-gebrochen p {
  margin: 0.2rem 0;
}
.kette-gebrochen .hinweis {
  color: var(--warn-rand);
}

.audit-payload {
  font-size: 0.72rem;
  max-width: 28rem;
  display: inline-block;
}

/* --------------------------------------------------------------------------
 * Statuszeile (aria-live)
 * ------------------------------------------------------------------------*/

.statuszeile {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: 32rem;
}
.statuszeile:empty {
  /* Leer = kein Kasten. Ohne das läge eine unsichtbare Fläche über der Seite
   * und schluckte Klicks auf alles darunter. */
  display: none;
}
.meldung {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  background: var(--grund);
  border: 1px solid var(--rahmen);
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  font-size: 0.85rem;
}
.meldung-ok {
  border-color: var(--ok-rand);
  color: var(--ok-rand);
}
.meldung-fehler {
  border-color: var(--warn-rand);
  color: var(--warn-rand);
  font-weight: 600;
}
.meldung-info {
  border-color: var(--rahmen);
}

/* Bewegungsempfindlichkeit respektieren — hier gibt es ohnehin keine
 * Animationen; die Regel steht als Zusage, dass das so bleibt. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}