/* New as a timeline (21 Oct 2026, shared: Mime first, Stroke and ShotScript later with their own accent and skin). A thin
	spine down the left in --spine-accent (default the ink) with a node per day; each entry is a card carrying the tile of
	what it changed, joined to the spine by a short tick. Markup from mime_kit.spine(). Static: nothing here moves. */
.spine, .spine-list { list-style: none; margin: 0; padding: 0; }
.spine { display: grid; }
.spine-day { position: relative; padding: 0 0 22px 36px; }
.spine-day::before { content: ""; position: absolute; left: 11px; top: 16px; bottom: -16px; width: 2px; border-radius: 2px; background: var(--spine-accent, var(--ink)); }
.spine-day:last-child { padding-bottom: 0; }
.spine-day:last-child::before { bottom: 0; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.spine-date { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 10px; font-weight: 850; font-size: 15px; line-height: 32px; letter-spacing: 0; }
.spine-node { position: absolute; left: -31px; top: 9px; width: 14px; height: 14px; border: 2.5px solid var(--spine-accent, var(--ink)); border-radius: 50%; background: var(--card, #fff); }
.spine-tally { align-self: center; flex: none; color: var(--spine-accent, var(--ink)); opacity: .55; }
.spine > .spine-day:first-child .spine-node { background: var(--spine-accent, var(--ink)); }
.spine-list { display: grid; gap: 10px; }
.spine-entry { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--paper); }
.spine-entry::before { content: ""; position: absolute; left: -24px; top: 31px; width: 24px; height: 2px; background: var(--spine-accent, var(--ink)); }
.spine-ico { line-height: 0; }
.spine-body { display: grid; gap: 8px; min-width: 0; }
.spine-body > p { margin: 0; }
.spine-body .doc-entry-head { align-items: center; }
.spine-body .doc-entry-title { flex-basis: auto; }
.spine-body .doc-chip { background: var(--card); }
@media (max-width: 760px) {
	.spine-day { padding-left: 26px; }
	.spine-day::before { left: 6px; }
	.spine-node { left: -26px; }
	.spine-entry { gap: 8px 11px; padding: 12px; border-radius: 16px; align-items: start; }
	.spine-body { display: contents; }
	.spine-body > :not(.doc-entry-head) { grid-column: 1 / -1; }
	.spine-entry::before { left: -19px; width: 19px; top: 26px; }
	.spine-ico .mm-svg, .spine-ico svg { width: 30px; height: 30px; }
}