/* History: the version list, the side-by-side diff, and the activity feed. */

.history { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; min-height: 0; }
ol.versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
ol.versions li { padding: 5px 7px; border-radius: 6px; border: 1px solid transparent; }
ol.versions li.on { border-color: var(--accent); background: var(--raise); }
dialog.modal.wide:has(.history) { width: min(1100px, calc(100vw - 32px)); }
.diff { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.diff-h { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font: 9px/1.6 var(--pixel); color: var(--muted); }
.diff-body { position: relative; max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.diff-row pre { margin: 0; padding: 0 8px; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; min-width: 0; }
.diff-row pre.del { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.diff-row pre.add { background: color-mix(in srgb, var(--act) 16%, transparent); }
.diff-row pre.gap { background: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--line) 50%, transparent) 5px 6px); }
.diff-row pre.same { color: var(--muted); }

.activity { padding: 12px 16px; }
ul.uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.uses li { padding: 5px 8px; border-left: 3px solid var(--line); background: var(--raise); border-radius: 0 6px 6px 0; }
details.uses-field[open] { gap: 8px; }
ol.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 900px; }
ol.feed li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 5px 8px; border-radius: 6px; }
ol.feed li:nth-child(odd) { background: color-mix(in srgb, var(--raise) 60%, transparent); }
ol.feed .when { width: 80px; flex: none; font: 11px var(--mono); color: var(--muted); }
ol.feed .kind { font: 11px var(--mono); color: var(--muted); }
ol.feed .what { font: 9px/1.6 var(--pixel); padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; }
ol.feed .what.created { color: var(--act); }
ol.feed .what.updated { color: var(--talk); }
ol.feed .what.deleted { color: var(--warn); }
@media (max-width: 900px) { .history { grid-template-columns: 1fr; } }

/* Test my progress. */
.radios { display: flex; flex-direction: column; gap: 6px; }
label.radio { display: flex; gap: 8px; align-items: center; cursor: pointer; }
ul.flag-list { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
ul.flag-list li { display: inline-flex; gap: 4px; align-items: center; background: var(--raise); border-radius: 99px; padding: 1px 4px 1px 8px; }

/* Publish dialog: one entry's staged-against-live diff under its row. */
ul.staged-list li { flex-wrap: wrap; }
.staged-list .staged-diff { flex-basis: 100%; max-height: 40vh; overflow: auto; }
.staged-list .staged-diff[hidden] { display: none; }