/* Die Schublade „Gelernte Regeln“ (B6, Sprint 3).
 *
 * Eigene Datei aus demselben Grund wie `katalog.css`, `gwg.css` und
 * `verwahrung.css`: an `notarflow.css` arbeiten in dieser Welle mehrere
 * Sessions gleichzeitig, und ein Merge-Konflikt in einer Stildatei ist reine
 * Reibungsverschwendung. Die Variablen (`--blau`, `--ink-soft`, `--line`,
 * `--warn`, `--ok`) kommen von dort — sie werden benutzt, nicht kopiert.
 * `.bereich-titel`, `.bereich-hinweis` und `.leer` ebenso: die Schublade sieht
 * aus wie ihre Nachbarn, weil sie im selben Kasten steht.
 */

/* ----------------------------------------------------------- Die Regeln */

/* Ein Block je Regel und keine Tabellenzeile: Wortlaut, Datum und Urheber
   gehören zusammen gelesen, und der Wortlaut ist oft ein ganzer Satz. */
.regel {
  border: 1px solid var(--line); border-left: 3px solid var(--blau);
  padding: 9px 11px; margin-bottom: 8px;
}

/* Ungekürzt und umbrechend. Eine abgeschnittene Anweisung lässt sich nicht
   beurteilen — und beurteilen ist der ganze Zweck dieser Ansicht. */
.regel-wortlaut { font-size: 12.5px; overflow-wrap: anywhere; }
.regel-herkunft { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.regel-zaehler { font-size: 11px; color: var(--ink-soft); margin: 6px 0 2px; }

.regel-knoepfe { display: flex; gap: 6px; margin-top: 8px; }
.regel-knoepfe button {
  font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer;
  background: none; border: 1px solid var(--line-stark); color: inherit;
}
.regel-knoepfe button:hover { border-color: var(--warn); color: var(--warn); }
.regel-knoepfe button:disabled { opacity: .5; cursor: default; }

.regel-umschalter {
  font: inherit; font-size: 11.5px; padding: 3px 0; margin-top: 8px;
  background: none; border: none; color: var(--blau-tief); cursor: pointer;
  text-decoration: underline;
}

/* Im Rückfrage-Dialog steht der Wortlaut noch einmal — „Wirklich löschen?"
   ohne Gegenstand ist keine Rückfrage, sondern ein Reflex. */
.nf-koerper .regel-wortlaut {
  border-left: 3px solid var(--blau); padding-left: 9px; margin-bottom: 8px;
}

/* --------------------------------------------------- Die Daumen-Statistik */

.daumen { display: flex; gap: 10px; margin: 8px 0 4px; }
.daumen-kachel {
  flex: 1; border: 1px solid var(--line); padding: 8px 10px; text-align: center;
}
.daumen-kachel[data-art="hoch"] { border-bottom: 2px solid var(--ok); }
.daumen-kachel[data-art="runter"] { border-bottom: 2px solid var(--warn); }
.daumen-zahl { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.daumen-text {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 2px;
}

/* ------------------------------------------------------- Die Warnhinweise */

.warnhinweis {
  border: 1px solid var(--line); border-left: 3px solid var(--line-stark);
  padding: 9px 11px; margin-bottom: 8px;
}
/* Der Rand markiert, was das Modell GERADE liest. Das ist die eine Frage, mit
   der jemand diese Liste öffnet — sie darf nicht im Kleingedruckten stehen. */
.warnhinweis[data-im-prompt="true"] { border-left-color: var(--warn); }
.warnhinweis[data-stillgelegt="true"] { opacity: .6; }

.warnhinweis-kopf {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-soft);
}
.warnhinweis-marke {
  margin-left: auto; font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; border: 1px solid var(--line-stark); padding: 0 5px;
}
.warnhinweis[data-im-prompt="true"] .warnhinweis-marke {
  border-color: var(--warn); color: var(--warn);
}
.warnhinweis-frage { font-size: 12.5px; margin-top: 5px; overflow-wrap: anywhere; }
.warnhinweis-antwort {
  font-size: 11.5px; color: var(--ink-soft); margin-top: 3px;
  overflow-wrap: anywhere;
}
.warnhinweis-bemerkung { font-size: 11px; color: var(--warn); margin-top: 4px; }