/* Ontology v2 — change history. EH tokens only: warm surfaces, hairline depth,
   mono for the record, lime as the single signal. No shadows. */

/* ----------------------------------------------------------- entities tab */
.ov2-entities { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ov2-entities-row { flex: 1; min-height: 0; display: flex; }

.icon-btn.hist-active {
  color: var(--accent-ink);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- avatars */
.hist-av {
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.hist-av.ai {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}

/* ============================================================ docked footer */
.hist-bar {
  flex: 0 0 auto;
  margin-top: 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
}

/* --- top row: filters + exit --- */
.hist-bar-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-faint);
  flex-wrap: wrap;
}
.hist-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hist-div { width: 1px; height: 18px; background: var(--border-soft); }
.hist-spacer { flex: 1; }
.hist-exit { padding: 6px 12px; font-size: 12.5px; }

/* --- filter popovers --- */
.hist-filter { position: relative; }
.hist-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.hist-filter-btn:hover { color: var(--text-primary); background: var(--surface-1); border-color: var(--border-strong); }
.hist-filter-btn.on { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }
.hist-filter-btn svg:first-child { color: var(--text-tertiary); }
.hist-filter-btn.on svg:first-child { color: var(--accent-ink); }

.hist-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.hist-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.hist-menu-item:hover { background: var(--surface-3); color: var(--text-primary); }
.hist-menu-item.on { color: var(--text-primary); }
.hist-menu-tick { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); flex: 0 0 auto; }

/* --- range segmented --- */
.hist-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.hist-range button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.hist-range button:hover { color: var(--text-primary); }
.hist-range button.on { background: var(--surface-3); border-color: var(--border-soft); color: var(--text-primary); }

/* --- middle row: revision summary + pager --- */
.hist-bar-mid {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.hist-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  overflow: hidden;
}
.hist-sum-when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-tertiary); }
.hist-sum-sep { color: var(--text-tertiary); opacity: 0.6; }
.hist-sum-author { font-size: 12.5px; color: var(--text-secondary); }
.hist-sum-title {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hist-sum-count {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  padding: 2px 9px;
}
.hist-sum-empty { font-size: 13px; color: var(--text-tertiary); }

.hist-pager { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.hist-pos { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-secondary); margin-right: 4px; white-space: nowrap; }
.hist-pos-of { color: var(--text-tertiary); }
.hist-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.hist-step:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-1); border-color: var(--border-strong); }
.hist-step:disabled { opacity: 0.35; cursor: default; }

/* --- revision rail --- */
.hist-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-faint);
  overflow-x: auto;
  scrollbar-width: thin;
}
.hist-rail::-webkit-scrollbar { height: 6px; }
.hist-rail::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 999px; }
.hist-rail-empty { font-size: 12.5px; color: var(--text-tertiary); padding: 4px 2px; }
.hist-tick {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.hist-tick:hover { color: var(--text-primary); background: var(--surface-3); border-color: var(--border-strong); }
.hist-tick.ai { color: var(--accent-ink); }
.hist-tick.on {
  color: var(--text-primary);
  background: var(--surface-3);
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent-ink);
}
.hist-tick.on.ai { color: var(--accent-ink); }
.hist-tick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent-ink); }

/* ============================================================ detail rail */
.hist-detail { gap: 16px; }
.hist-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hist-detail-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hist-detail-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--text-primary); }
.hist-agent-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
}
.hist-detail-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.hist-meta-sep { opacity: 0.55; padding: 0 2px; }
.hist-detail-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hist-detail-area {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 400;
}
.hist-detail-area svg { color: var(--text-tertiary); }

.hist-changes { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.hist-change {
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}
.hist-change-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 11px;
  flex-wrap: wrap;
}
.hist-op {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  flex: 0 0 auto;
}
.hist-op.create { color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.hist-op.update { color: var(--text-secondary); background: var(--surface-3); border: 1px solid var(--border-soft); }
.hist-op.delete { color: var(--error-ink); background: color-mix(in oklab, var(--error-ink) 12%, transparent); border: 1px solid color-mix(in oklab, var(--error-ink) 30%, transparent); }
.hist-change-kind { font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--text-primary); }
.hist-change-on { font-size: 12px; color: var(--text-tertiary); }

.hist-diff {
  border-top: 1px solid var(--border-faint);
  background: var(--surface-2);
}
.hist-diff-row { display: flex; gap: 10px; padding: 7px 11px; }
.hist-diff-row.after { border-top: 1px solid var(--border-faint); }
.hist-diff-label {
  flex: 0 0 44px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 1px;
}
.hist-diff-val { font-size: 12px; line-height: 1.5; color: var(--text-secondary); min-width: 0; }
.hist-diff-row.after .hist-diff-val { color: var(--text-primary); }
.hist-diff-val code, .hist-diff-val { word-break: break-word; }

.hist-hint {
  margin-top: auto;
  padding: 12px 13px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.hist-hint-title { font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--text-primary); margin-bottom: 4px; }
.hist-hint p { font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }

.hist-empty { display: flex; flex-direction: column; gap: 8px; }
.hist-empty-lede { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

/* ====================================================== graph history mode */
/* added-this-revision badge on a node */
.ov2-added-badge {
  position: absolute;
  top: -9px;
  right: -8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--lime);
  border-radius: 999px;
  padding: 2px 7px;
  box-shadow: 0 0 0 2px var(--canvas);
}
/* a node a revision touched stays vivid + lime-edged while history is on */
.ov2-node.hist-touched {
  border-color: var(--accent-border);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 0 var(--accent-ink);
}
.ov2-stage.hist-on .ov2-node:not(.hist-touched) { opacity: 0.22; }
.ov2-stage.hist-on .ov2-area { opacity: 0.5; }
.ov2-stage.hist-on .ov2-area.hist-area { opacity: 1; border-color: var(--border-strong); }