/* ---------- how long ago, beside a date (when.js, 19 Oct 2026) ---------- */
.when-ago { display: inline-flex; align-items: baseline; color: var(--muted); font-weight: inherit; font-size: inherit; white-space: nowrap;
	-webkit-touch-callout: none; user-select: none; cursor: default; }
.when-ago::before { content: "\00b7"; margin: 0 .45em; opacity: .7; }
.when-paren::before { content: "("; margin: 0 0 0 .3em; opacity: 1; }
.when-paren::after { content: ")"; }
.when-box { display: inline-grid; overflow: hidden; vertical-align: baseline; }
.when-t { grid-area: 1 / 1; justify-self: start; white-space: nowrap; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 3px; transition: text-decoration-color .6s var(--ease, ease), color .6s var(--ease, ease); }
@media (hover: hover) { .when-ago:hover .when-t { color: var(--ink); text-decoration-color: currentColor; transition-duration: .35s; } }
.when-pair { display: inline-flex; align-items: baseline; white-space: nowrap; }
.doc-entry-head .when-ago { font-size: 13px; font-weight: 700; }
.when-tip { position: fixed; z-index: 60; left: 0; top: 0; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: var(--paper);
	font-weight: 700; font-size: 12.5px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
	box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / .14), 0 8px 24px rgb(var(--shadow-rgb) / .16); }