/* History and navigation (assets/js/ext/history_nav.js): diffs, block links, Updates, page views. */
:root { --hn-add: rgba(15, 123, 108, .14); --hn-add-fg: #0f7b6c; --hn-del: rgba(224, 62, 62, .12); --hn-del-fg: #c4302b; --hn-chg: rgba(223, 171, 1, .16); --hn-flash: rgba(35, 131, 226, .22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hn-add: rgba(77, 171, 154, .2); --hn-add-fg: #4dab9a; --hn-del: rgba(255, 115, 105, .16); --hn-del-fg: #ff7369; --hn-chg: rgba(255, 220, 73, .14); --hn-flash: rgba(82, 156, 245, .3); }
}
:root[data-theme="dark"] { --hn-add: rgba(77, 171, 154, .2); --hn-add-fg: #4dab9a; --hn-del: rgba(255, 115, 105, .16); --hn-del-fg: #ff7369; --hn-chg: rgba(255, 220, 73, .14); --hn-flash: rgba(82, 156, 245, .3); }

/* a block opened from a link or an update */
.block.hn-flash { animation: hn-flash 2.2s ease-out; border-radius: 4px; }
@keyframes hn-flash { 0%, 35% { background: var(--hn-flash); } 100% { background: transparent; } }

/* backlinks: the text of the linking block */
.hn-quotes { display: flex; flex-direction: column; margin: 0 0 4px 22px; }
.hn-quote { border: 0; background: none; text-align: left; font-size: 13px; color: var(--fg-muted); padding: 1px 6px; border-left: 2px solid var(--border); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 560px; }
.hn-quote:hover { color: var(--fg); background: var(--bg-hover); }

/* page ⋯ menu: viewers */
.hn-stack { display: inline-flex; }
.hn-stack .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--bg-elev, var(--bg)); }
.hn-stack .avatar:first-child { margin-left: 0; }
.hn-viewers { padding: 4px; max-height: 320px; overflow-y: auto; }
.hn-viewer { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 14px; }

/* Updates */
.hn-updates-btn { position: relative; }
.hn-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.hn-badge[hidden] { display: none; }
.hn-updates { display: flex; flex-direction: column; max-height: min(600px, 80vh); }
.hn-updates-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.hn-updates-head .spacer { flex: 1; }
.hn-list { overflow-y: auto; padding: 4px; }
.hn-list .spinner { margin: 20px auto; }
.hn-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; position: relative; }
.hn-item:hover, .hn-item:focus-visible { background: var(--bg-hover); outline: none; }
.hn-item.unread::before { content: ''; position: absolute; left: 3px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hn-icon { width: 22px; text-align: center; flex: none; }
.hn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hn-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.hn-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-head .small { flex: none; }
.hn-who { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.hn-snippet { font-size: 13px; color: var(--fg-muted); border-left: 2px solid var(--border); padding-left: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* Version history: compare and database versions */
.hn-compare { margin-right: auto; }
.hn-diff-sum { display: flex; gap: 12px; margin: 0 0 8px; }
.hn-sum-added { color: var(--hn-add-fg); }
.hn-sum-removed { color: var(--hn-del-fg); }
.hn-sum-changed { color: var(--fg); }
.hn-diff .block.hn-d-added, .hn-diff .block.hn-d-removed, .hn-diff .block.hn-d-changed { border-radius: 4px; box-shadow: inset 3px 0 0 var(--c); background: var(--bg-d); }
.block.hn-d-added { --c: var(--hn-add-fg); --bg-d: var(--hn-add); }
.block.hn-d-removed { --c: var(--hn-del-fg); --bg-d: var(--hn-del); }
.block.hn-d-removed .content { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hn-del-fg) 60%, transparent); }
.block.hn-d-changed { --c: #dfab01; --bg-d: transparent; }
.hn-diff ins, .hn-change ins, .hn-table ins { text-decoration: none; background: var(--hn-add); color: var(--hn-add-fg); border-radius: 3px; padding: 0 1px; }
.hn-diff del, .hn-change del, .hn-table del { background: var(--hn-del); color: var(--hn-del-fg); border-radius: 3px; padding: 0 1px; }
.hn-props { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; font-size: 14px; }
.hn-prop, .hn-change { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 2px 0; }
.hn-change { font-size: 14px; }
.hn-prop-name { width: 160px; flex: none; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.hn-chip { font-size: 13px; padding: 2px 8px; border-radius: 4px; background: var(--bg-hover); }
.hn-chip.hn-d-added { background: var(--hn-add); color: var(--hn-add-fg); }
.hn-chip.hn-d-removed { background: var(--hn-del); color: var(--hn-del-fg); text-decoration: line-through; }
.hn-chip.hn-d-changed { background: var(--hn-chg); }
.hn-rows-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hn-table-wrap { overflow-x: auto; margin: 4px 0 8px; }
.hn-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.hn-table th, .hn-table td { border-bottom: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hn-table th { color: var(--fg-muted); font-weight: 500; }
.hn-table tr.hn-d-removed td { background: var(--hn-del); }
.hn-table tr.hn-d-removed .hn-row-title { color: var(--hn-del-fg); }
.hn-table tr.hn-d-added td { background: var(--hn-add); }
.hn-table td.hn-d-changed, .hn-table tr.hn-d-changed .hn-row-title { background: var(--hn-chg); }
.hn-row-title .hn-tag, .hn-row-title .mini { margin-left: 6px; }
.hn-tag { font-size: 11px; color: var(--fg-muted); background: var(--bg-hover); border-radius: 4px; padding: 0 5px; }
@media (max-width: 760px) {
  .hn-prop-name { width: 110px; }
}