/* ── layout ──────────────────────────────────────────────── */
.rd-layout {
  display: flex;
  height: 100%;
  min-height: 400px;
}

/* ── sidebar ─────────────────────────────────────────────── */
.rd-sidebar {
  width: 250px;
  min-width: 200px;
  flex-shrink: 0;
  border-right: 1px solid #e9e9eb;
  overflow-y: auto;
  padding: 12px 0;
}

.rd-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
  padding: 0 14px 10px;
}

.rd-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rd-version-item {
  padding: 10px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.rd-version-item:hover { background: #f5f6f7; }
.rd-version-item--active { background: #edf2fa; border-left-color: #1b70bf; }

.rd-version-date { display: block; font-size: 13px; font-weight: 600; color: #222; }
.rd-version-user { display: block; font-size: 12px; color: #999; margin-top: 2px; }
.rd-version-pub {
  display: inline-block; margin-top: 5px;
  padding: 1px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700;
  background: #d4edda; color: #155724;
}

/* ── main content ────────────────────────────────────────── */
.rd-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-width: 0;
}

.rd-placeholder {
  padding: 60px 0;
  text-align: center;
  color: #bbb;
  font-size: 14px;
}

.rd-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 16px;
}
.rd-meta strong { color: #222; }

.rd-error {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-left: 4px solid #dc3545;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #721c24;
  margin-bottom: 16px;
}

.rd-no-changes {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: #888;
}

/* ── loading ─────────────────────────────────────────────── */
.rd-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  font-size: 13px;
  color: #999;
}
.rd-loading--inline { padding: 8px 0; }

.rd-spinner {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: 2px solid #ddd;
  border-top-color: #1b70bf;
  border-radius: 50%;
  animation: rd-spin 0.7s linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }

.rd-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: #bbb;
}

/* ── diff table ──────────────────────────────────────────── */
.rd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.rd-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  background: #fafafa;
  border-bottom: 2px solid #e9e9eb;
}
.rd-th-field { width: 22%; }
.rd-th-old   { width: 39%; border-left: 3px solid #dc5050; padding-left: 10px; }
.rd-th-new   { width: 39%; border-left: 3px solid #4a9e3a; padding-left: 10px; }

.rd-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  word-break: break-word;
}
.rd-table tr:last-child td { border-bottom: none; }

.rd-td-field {
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

/* changed row */
.rd-row-changed .rd-td-old { background: #fff5f5; border-left: 3px solid #dc5050; color: #9b2020; }
.rd-row-changed .rd-td-new { background: #f2faee; border-left: 3px solid #4a9e3a; color: #2d6e1a; }
/* removed (existed before, gone now) */
.rd-row-removed .rd-td-old { background: #fff5f5; border-left: 3px solid #dc5050; color: #9b2020; }
.rd-row-removed .rd-td-new { background: #fafafa; border-left: 3px solid #ddd;    color: #bbb; }
/* added (new in current draft) */
.rd-row-added .rd-td-old   { background: #fafafa; border-left: 3px solid #ddd;    color: #bbb; }
.rd-row-added .rd-td-new   { background: #f2faee; border-left: 3px solid #4a9e3a; color: #2d6e1a; }

.rd-null { font-style: italic; }