/* ── VIDEO HISTORY ─────────────────────────────────────
   Admin-only change log. Tokens only; accent is reserved for the marker on a
   restore entry, which is the one thing worth picking out of the list. */

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

.hx-item { border-bottom: 1px solid var(--b1); }
.hx-item:last-child { border-bottom: none; }

.hx-head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  width: 100%; padding: 12px 4px; background: none; border: none;
  text-align: left; font-family: inherit;
  transition: background var(--t-base) var(--ease);
}
.hx-head:hover { background: var(--bg3); }
.hx-item.open .hx-head { background: var(--bg3); }

/* Timeline marker. A restore is the entry an admin scans for, so it is the
   only one that takes accent. */
.hx-dot {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px;
  border-radius: var(--r-pill); background: var(--b3);
}
.hx-dot-revert { background: var(--accent); }

.hx-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hx-who {
  font-size: var(--fs-13); font-weight: 500; color: var(--tx);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hx-you, .hx-tag {
  font-size: var(--fs-10); font-weight: 500; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--bg4); color: var(--t3);
}
.hx-tag { background: var(--accent-bg); color: var(--accent); }
.hx-what {
  font-size: var(--fs-12); color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-when {
  flex: 0 0 auto; font-size: var(--fs-11); color: var(--t4);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.hx-detail {
  padding: 2px 4px 16px 26px;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hx-diff { display: flex; flex-direction: column; gap: 4px; }
.hx-diff-k {
  font-size: var(--fs-11); font-weight: 600; color: var(--t4);
  letter-spacing: .04em; text-transform: uppercase;
}
.hx-diff-v {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--fs-12); line-height: 1.6;
  padding: 7px 9px; border-radius: var(--r-2);
  overflow-wrap: anywhere;
}
/* Semantic tints, kept faint: this is a record to read, not an alert. */
.hx-was { background: var(--danger-bg); color: var(--t2); }
.hx-now { background: var(--success-bg); color: var(--t2); }
.hx-diff-v > span {
  flex: 0 0 34px; font-size: var(--fs-10); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--t4); padding-top: 2px;
}
.hx-diff-v em { color: var(--t4); font-style: italic; }

.hx-restore {
  align-self: flex-start; height: 32px; padding: 0 var(--s-4);
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg2); color: var(--tx);
  font-family: inherit; font-size: var(--fs-12); font-weight: 500;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hx-restore:hover { background: var(--bg3); border-color: var(--b3); }
.hx-note { font-size: var(--fs-12); color: var(--t4); margin: 0; }