.history-v01-list { display: grid; gap: 12px; }
.history-v01-metric { padding: 16px; border: 1px solid var(--ink-200); border-radius: 8px; background: var(--card); }
.history-v01-metric > h3 { margin: 0 0 12px; color: var(--ink-900); font-size: 14px; font-weight: 700; }
.history-v01-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.history-v01-side { min-width: 0; padding: 12px; border: 1px solid var(--ink-100); border-radius: 6px; background: var(--paper); }
.history-v01-side h4 { margin: 0 0 9px; color: var(--ink-700); font-size: 12px; }
.history-v01-current,
.history-v01-previous { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px; }
.history-v01-current { margin-bottom: 7px; }
.history-v01-current span,
.history-v01-previous span:first-child,
.history-v01-state { color: var(--ink-400); font-size: 11px; line-height: 1.5; }
.history-v01-current strong,
.history-v01-previous strong { color: var(--ink-900); font: 700 13px/1.4 var(--mono); white-space: nowrap; }
.history-v01-delta { color: var(--ink-700); font: 700 11px/1.4 var(--mono); white-space: nowrap; }
.history-v01-details { margin-top: 10px; border-top: 1px solid var(--ink-200); padding-top: 8px; }
.history-v01-details summary { cursor: pointer; color: var(--ink-500); font-size: 11px; }
.history-v01-details ol { margin: 8px 0 0; padding: 0; list-style: none; }
.history-v01-details li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--ink-500); font-size: 11px; }
.history-v01-details li strong { color: var(--ink-700); font-family: var(--mono); white-space: nowrap; }
.history-v01-side.is-history-focused { outline: 2px solid var(--ink-300); outline-offset: 2px; }
.history-v01-compatibility { margin-top: 16px; color: var(--ink-500); font-size: 11px; }
.history-v01-compatibility > summary { cursor: pointer; }

.assessment-history-context {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 2px;
  align-items: center;
  border: 0;
  color: var(--ink-400);
  background: transparent;
  font: 500 10px/1.35 var(--sans);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.assessment-history-context:hover,
.assessment-history-context:focus-visible { color: var(--ink-700); background: transparent; }
.assessment-history-context:focus-visible { outline: 2px solid var(--ink-300); outline-offset: -2px; }
.centered-side > .assessment-history-context { grid-column: 1 / -1; }