/* CoreForge · Projekt-Cockpit, Seite „Review und Architektur“ (Welle A5, Entwurf D3 S4 und S6).
   Nur Aufbau und Feinheiten; Karten, Tabellen, Chips, Dialoge, Leerzustände kommen aus komponenten.css.
   Farben nur über die Variablen aus tokens.css, damit Hell und Dunkel aus derselben Regel kommen. */

.rv-seite {
  display: grid;
  gap: var(--cf-abstand-4);
  min-width: 0;
}

.rv-kopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-2) var(--cf-abstand-3);
}

.rv-stand {
  margin: 0;
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-leise);
}

.rv-inhalt {
  display: grid;
  gap: var(--cf-abstand-4);
  min-width: 0;
}

.rv-abschnitt {
  display: grid;
  gap: var(--cf-abstand-2);
  min-width: 0;
}

.rv-leise {
  color: var(--cf-text-leise);
  font-size: var(--cf-groesse-meta);
}

p.rv-leise {
  margin: 0;
}

.rv-mono {
  font-family: var(--cf-schrift-mono);
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-zwei);
}

.rv-block {
  display: block;
}

.rv-text {
  margin: 0;
  line-height: var(--cf-zeilenhoehe);
  overflow-wrap: anywhere;
}

.rv-h2 {
  margin: 0;
  font-size: var(--cf-groesse-abschnitt);
}

.rv-h3 {
  margin: var(--cf-abstand-3) 0 var(--cf-abstand-1);
  font-size: var(--cf-groesse);
}

/* ---------- Kacheln ---------- */

.rv-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--cf-abstand-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-kachel {
  padding: var(--cf-abstand-3) var(--cf-abstand-4);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}

.rv-kachel-titel,
.rv-kachel-zusatz {
  margin: 0;
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-leise);
}

.rv-kachel-wert {
  margin: var(--cf-abstand-1) 0;
  font-size: var(--cf-groesse-kennzahl);
  font-weight: 600;
  color: var(--cf-text);
}

/* ---------- Review: Kopf, Prüfchips, Diff ---------- */

.rv-pr {
  display: grid;
  gap: var(--cf-abstand-3);
  min-width: 0;
}

.rv-prkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-2) var(--cf-abstand-4);
  padding: var(--cf-abstand-3) var(--cf-abstand-4);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}

.rv-prtitel,
.rv-prkopf-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-abstand-2) var(--cf-abstand-3);
}

.rv-stat {
  font-family: var(--cf-schrift-mono);
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-zwei);
}

.rv-plus {
  color: var(--cf-erfolg-schrift);
}

.rv-minus {
  color: var(--cf-gefahr);
}

.rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-abstand-2);
}

.rv-blaettern {
  display: flex;
  align-items: center;
  gap: var(--cf-abstand-1);
}

.rv-dateiwahl {
  max-width: 640px;
  margin-bottom: var(--cf-abstand-3);
}

.rv-diff {
  display: grid;
  gap: var(--cf-abstand-2);
  min-width: 0;
}

.rv-diff-rahmen {
  overflow-x: auto;
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius);
}

.rv-diff-rahmen:focus-visible {
  outline: 2px solid var(--cf-fokus);
  outline-offset: 2px;
}

.rv-diff-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cf-schrift-mono);
  font-size: var(--cf-groesse-meta);
}

.rv-diff-tabelle td {
  padding: 2px var(--cf-abstand-2);
  vertical-align: top;
}

.rv-dz-nr {
  position: relative;
  width: 4.5em;
  text-align: right;
  white-space: nowrap;
  color: var(--cf-text-leise);
  user-select: none;
}

.rv-dz-zeichen {
  width: 1.5em;
  color: var(--cf-text-leise);
}

.rv-dz-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--cf-text);
}

tr.rv-dz-plus td {
  background: var(--cf-erfolg-weich);
}

tr.rv-dz-plus .rv-dz-zeichen {
  color: var(--cf-erfolg-schrift);
}

tr.rv-dz-minus td {
  background: var(--cf-gefahr-weich);
}

tr.rv-dz-minus .rv-dz-zeichen {
  color: var(--cf-gefahr);
}

.rv-hunk td {
  padding: var(--cf-abstand-1) var(--cf-abstand-2);
  color: var(--cf-text-leise);
  background: var(--cf-flaeche);
}

.rv-dz-faden td {
  padding: var(--cf-abstand-2) var(--cf-abstand-3);
  font-family: var(--cf-schrift);
  font-size: var(--cf-groesse);
  background: var(--cf-karte);
}

.rv-dz-kommentar {
  position: absolute;
  left: 2px;
  top: 1px;
  width: 18px;
  height: 18px;
  padding: 0;
  font: inherit;
  line-height: 16px;
  color: var(--cf-akzent-schrift);
  background: var(--cf-akzent-weich);
  border: 1px solid var(--cf-akzent);
  border-radius: var(--cf-radius-klein);
  cursor: pointer;
  opacity: 0;
}

tr.rv-dz:hover .rv-dz-kommentar,
.rv-dz-kommentar:focus-visible {
  opacity: 1;
}

.rv-dz-kommentar:focus-visible {
  outline: 2px solid var(--cf-fokus);
  outline-offset: 1px;
}

@media (hover: none) {
  .rv-dz-kommentar {
    opacity: 1;
  }
}

/* Kommentar am Code: Karte mit Akzentrand wie im Entwurf. */
.rv-faden {
  display: grid;
  gap: var(--cf-abstand-2);
  max-width: 720px;
  padding: var(--cf-abstand-3) var(--cf-abstand-4);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}

.rv-faden-offen {
  border-color: var(--cf-ki-spur);
  box-shadow: var(--cf-schatten-klein);
}

.rv-faden-kopf,
.rv-faden-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-2);
}

.rv-faeden {
  display: grid;
  gap: var(--cf-abstand-2);
}

.rv-kommentarform {
  max-width: 720px;
}

.rv-entscheidungen {
  display: grid;
  gap: var(--cf-abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-entscheidungen li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cf-abstand-1) var(--cf-abstand-3);
}

.rv-entscheidungen li .rv-text {
  flex-basis: 100%;
}

/* Fußleiste mit Merge-Prüfung und den beiden Entscheidungen. */
.rv-entscheidungsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-3);
  padding: var(--cf-abstand-3) var(--cf-abstand-4);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
  box-shadow: var(--cf-schatten-klein);
}

.rv-leiste-text {
  display: grid;
  gap: var(--cf-abstand-1);
  min-width: 0;
}

.rv-gruende {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-zwei);
}

.rv-leiste-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-abstand-2);
}

/* ---------- Architektur ---------- */

.rv-arch-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cf-abstand-4);
}

.rv-punkte {
  margin: 0;
  padding-left: 1.2em;
  line-height: var(--cf-zeilenhoehe);
}

.rv-fakten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--cf-abstand-1) var(--cf-abstand-4);
  margin: 0;
}

.rv-fakten dt {
  color: var(--cf-text-leise);
}

.rv-fakten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Noch nicht angebunden ---------- */

.rv-offenliste {
  display: grid;
  gap: var(--cf-abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-offenliste li {
  display: grid;
  gap: 2px;
}

.rv-offenliste span {
  font-size: var(--cf-groesse-meta);
  color: var(--cf-text-leise);
}

@media (max-width: 1000px) {
  .rv-arch-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .rv-fakten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Abweichungsprüfung der Architektur: Regel als Chip, daneben die betroffene Entscheidung. */
.rv-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-abstand-2, 8px);
}

/* ---------- Welle 4 (UX-Umsetzung): Anbindungen und Regelwerk ---------- */

.rv-pruefzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-3);
}

.rv-externliste,
.rv-regeln,
.rv-pfade {
  display: grid;
  gap: var(--cf-abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-extern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-abstand-2) var(--cf-abstand-4);
  padding: var(--cf-abstand-2) 0;
  border-bottom: 1px solid var(--cf-rahmen);
}

.rv-extern:last-child {
  border-bottom: 0;
}

.rv-extern-zustand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-abstand-2);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rv-pfade {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 var(--cf-abstand-2);
}

.rv-pfade code {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-klein, 4px);
  background: var(--cf-flaeche);
  font-family: var(--cf-schrift-mono, monospace);
  font-size: var(--cf-groesse-meta);
  overflow-wrap: anywhere;
}

.rv-unterkopf {
  margin: var(--cf-abstand-3) 0 var(--cf-abstand-1);
  font-size: var(--cf-groesse-meta);
  font-weight: 600;
  color: var(--cf-text-leise);
}

.rv-unterkopf:first-child {
  margin-top: 0;
}

.rv-hinweise summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--cf-text-leise);
}