/* SAN02 → SAN03 replication card — shared by /system/backups and /system/storage.
   Semantic colour only (good / warning / unknown); no brand accent, so it never
   competes with the page it sits on. */
.repl-card {
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 12px; background: var(--bg-elev);
  padding: var(--space-4); margin: 0 0 var(--space-5);
}
.repl-ok      { border-left-color: var(--green); }
.repl-bad     { border-left-color: var(--red); }
.repl-unknown { border-left-color: var(--yellow); }

.repl-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.repl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-faint); }
.repl-ok .repl-dot      { background: var(--green); }
.repl-bad .repl-dot     { background: var(--red); }
.repl-unknown .repl-dot { background: var(--yellow); }

.repl-title { margin: 0; font-size: var(--fs-md); font-weight: 600; flex: 1; }
.repl-verdict {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: 2px 10px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--text-mute);
}
.repl-ok .repl-verdict      { color: var(--green-ink); border-color: var(--green); }
.repl-bad .repl-verdict     { color: var(--red-deep); border-color: var(--red); }
.repl-unknown .repl-verdict { color: var(--yellow-deep); border-color: var(--yellow); }

.repl-detail { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text); }

.repl-facts {
  margin: var(--space-3) 0 0; display: grid; gap: var(--space-2) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.repl-facts div { min-width: 0; }
.repl-facts dt { font-size: var(--fs-xs); color: var(--text-mute); }
.repl-facts dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.repl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }
.repl-warn { color: var(--red-deep); font-weight: 600; }
.repl-foot { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--text-mute); }
.repl-foot a { color: var(--brand); }