/* <cw-replay-config-overlay> — 1:1-Port ReplayConfigOverlay.vue (SPEC-0122).
   Master-Detail mit Bestands-Schreibwegen, Token-only, kein Shadow DOM. */
.replay-config-overlay {
  /* RAHMUNG (Nutzermeldung „Überlappung mit Menü", 2026-08-11):
     Hier stand `position: absolute; inset: 16px 24px 24px 88px; z-index: 360` —
     wortgleich aus dem Bestand übernommen (ReplayConfigOverlay.vue:1). Das ist
     dieselbe Falle wie bei asset3d-baukasten.css (2026-08-07): Der Bestand
     mountet die Maske INNERHALB der `.core-stage` neben der Seitenleiste
     (App.vue:196), der Port hängt sie als Kind von `.vc-shell-overlay` in die
     Inhaltszelle der Shell. Dieses Wirtselement ist NICHT positioniert, also
     sucht sich der Dialog den Viewport als Bezugsrahmen: die 16 px oben landen
     ÜBER der 48 px hohen Kopfleiste, und die 88 px links waren auf die
     eingeklappte Bestands-Leiste gerechnet, nicht auf das 280 px breite
     Menüpanel des Ports. Mit `z-index: 360` gegen `z-index: 20` der Kopfleiste
     legte sich der Dialog obendrauf.
     Die Maske FÜLLT jetzt ihren Wirt; wo dieser liegt, entscheidet die Shell
     (`.vc-shell-overlay` in shell.css). Rundung und Schlagschatten entfallen
     dabei wie bei asset3d-baukasten: eine randlos eingesetzte Fläche trägt
     keine freistehende Kartenkante. */
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--core-surface, var(--surface));
  color: var(--core-text, var(--text));
  border: 1px solid var(--core-border, var(--border));
  box-shadow: none;
  /* HÖHENKETTE: siehe asset3d-baukasten.css — Fehler- und Meldungszeile sind
     bedingte Kinder; ohne sie landete `.replay-config-body` in einer
     `auto`-Zeile und schrumpfte auf Inhaltshöhe. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.replay-config-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.replay-config-header h3 { margin: 0 0 4px; }
.replay-config-header p { margin: 0; color: var(--core-text-muted, var(--text-muted)); font-size: 13px; }
.replay-config-toolbar, .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.replay-close {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-elevated, var(--surface-elevated));
  color: var(--core-text, var(--text));
  cursor: pointer;
}
.replay-config-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  gap: 12px;
  padding: 12px;
}
.replay-config-master, .replay-config-detail {
  min-height: 0;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-lg, 8px);
  background: var(--core-surface-elevated, var(--surface-elevated));
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}
.master-head, .capture-list-head { display: flex; justify-content: space-between; align-items: center; }
.master-title, .detail-title { font-weight: 700; }
.replay-list, .detail-form { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 8px; }
.replay-config-overlay .replay-row {
  width: 100%;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface, var(--surface));
  color: var(--core-text, var(--text));
  padding: 10px;
  text-align: left;
  display: grid;
  gap: 5px;
  cursor: pointer;
}
.replay-config-overlay .replay-row[aria-pressed='true'],
.replay-config-overlay .replay-row:hover { border-color: var(--core-primary, var(--primary)); }
.replay-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.replay-row-sub { color: var(--core-text-muted, var(--text-muted)); font-size: 13px; }
.detail-field { display: grid; gap: 3px; }
.detail-label { color: var(--core-text-muted, var(--text-muted)); font-size: 12px; }
.detail-value { font-size: 14px; }
.replay-config-overlay input,
.replay-config-overlay select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface, var(--surface));
  color: var(--core-text, var(--text));
  min-height: 34px;
  padding: 7px 10px;
  font: inherit;
}
.capture-list { display: grid; gap: 8px; border-top: 1px solid var(--core-border, var(--border)); padding-top: 10px; }
.capture-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 90px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  padding: 6px 8px;
}
.capture-index { color: var(--core-text-muted, var(--text-muted)); }
.capture-dwell { color: var(--core-text-muted, var(--text-muted)); font-size: 13px; text-align: right; }
.capture-empty { color: var(--core-text-muted, var(--text-muted)); font-size: 13px; }
@media (max-width: 900px) {
  /* Das `inset: 12px` des Bestands ist mit der Rahmung oben entfallen — ohne
     absolute Positionierung hat es keine Wirkung mehr. Der Umbruch auf eine
     Spalte bleibt. */
  .replay-config-body { grid-template-columns: 1fr; }
}