/* Scoped timeline and field comparison presentation for the governed history drawer. */
.version-history-v4 .version-history-live-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: .5rem;
  padding: .12rem .45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}

.version-history-v4 .version-history-item {
  position: relative;
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--border-subtle, #c8c8c8);
}

.version-history-v4 .version-history-item::before {
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-start: -.38rem;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--brand-primary);
  content: '';
}

.version-history-v4 .version-history-change-note {
  overflow-wrap: anywhere;
}

.version-history-v4 [data-version-history-diff] {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-subtle, #c8c8c8);
  border-radius: .5rem;
}

.version-history-v4 .version-history-diff > div {
  display: grid;
  grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr);
  gap: .35rem 1rem;
  padding-block: .75rem;
  border-block-end: 1px solid var(--border-subtle, #c8c8c8);
}

.version-history-v4 .version-history-diff > div:last-child {
  border-block-end: 0;
}

.version-history-v4 .version-history-diff dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.version-history-v4 .version-history-before,
.version-history-v4 .version-history-after {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
}

.version-history-v4 .version-history-before {
  color: var(--text-muted, #555);
}

.version-history-v4 .version-history-after {
  margin-block-start: .25rem;
}

.version-history-v4 .version-history-compare-live {
  margin-block: .35rem;
}

.version-history-v4 .version-history-compare select,
.version-history-v4 .version-history-compare button,
.version-history-v4 button[data-version-history-close],
.version-history-v4 .version-history-compare-live,
.version-history-v4 .version-history-restore,
.version-history-v4 .version-history-restore button,
.version-history-v4 input,
.version-history-v4 textarea {
  min-height: 44px;
}

.version-history-v4 button[data-version-history-close] {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
}

.version-history-v4 :focus-visible {
  outline: 3px solid var(--link, var(--brand-primary));
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

html[data-shell="refined"] body:not(.admin-page) .version-history-v4 :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--link, var(--brand-primary));
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .version-history-v4 .version-history-diff > div {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }
}