/* THE RULER BESIDE THE LIST (2026-08-26, lab/the-ticks-beside-the-list.html).

   One tick per post in the paper's left margin. Every number is a token; the
   decisions were Manuel's, on the lab page, in this order: ticks 1 thick (were 2 in --border-default; Manuel found that too dominant the same day), all
   left-aligned on one line 12 from the paper's edge; resting 8 long; the
   current post 32 and black; the hovered tick 32 too, with a wave of three
   on each side at 26, 20, 14 (a quarter of the growth per row); the wave
   moves by row, not by pixel, and only the band of rows is live — the empty
   paper above and below it is not. The title card is a menu with one row. */
body.has-frame .frame-paper {
	position: relative;
}
.post-ruler {
	--ruler-gap: var(--space-3);
	--ruler-tick: var(--space-2);
	--ruler-crest: var(--space-8);
	--ruler-thickness: 1px;
	--ruler-inset: var(--space-3);
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--ruler-inset);
	z-index: var(--layer-raised);
	display: none;
	flex-direction: column;
	justify-content: center;
	width: calc(var(--ruler-crest) + 2 * var(--space-2));
	padding-inline: var(--space-2);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
@media (min-width: 1010px) {
	body.has-frame .post-ruler {
		display: flex;
	}
}
.post-ruler ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.post-ruler li {
	position: relative;
	height: var(--ruler-gap);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.post-ruler .ruler-tick {
	display: block;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	height: var(--ruler-thickness);
	width: var(--ruler-tick);
	border-radius: 999px;
	background: var(--border-subtle);
	cursor: pointer;
	position: relative;
	transition:
		width var(--motion-duration-spatial) var(--motion-easing-standard, ease),
		background-color var(--motion-duration-feedback) var(--motion-easing-standard, ease);
}
.post-ruler .ruler-tick:focus-visible {
	outline: none;
	width: var(--ruler-crest);
	background: var(--border-strong);
}
.post-ruler li.is-hover .ruler-tick {
	background: var(--border-strong);
}
.post-ruler li {
	cursor: pointer;
}
.post-ruler .ruler-tick::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block: calc((var(--ruler-thickness) - var(--ruler-gap)) / 2);
}
.post-ruler li.is-current .ruler-tick {
	width: var(--ruler-crest);
	background: var(--text-primary);
}
.post-ruler .ruler-label {
	position: absolute;
	inset-inline-start: calc(var(--ruler-crest) + var(--space-3));
	top: 50%;
	translate: 0 -50%;
	max-width: 28rem;
	padding: calc(var(--layout-menu-padding) + var(--space-1-5)) calc(var(--layout-menu-padding) + var(--layout-menu-item-padding-inline));
	border-radius: calc(var(--layout-menu-padding) + var(--radius-control));
	background: var(--surface-raised);
	box-shadow: var(--elevation-floating);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-weight-body);
	line-height: var(--text-base-line-height);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--motion-duration-feedback) var(--motion-easing-standard, ease);
}
.post-ruler .ruler-label small {
	display: block;
	margin-block-start: var(--space-0-5);
	color: var(--text-subtle);
	font-size: var(--text-sm);
	line-height: var(--text-sm-line-height);
}
.post-ruler li.is-hover .ruler-label,
.post-ruler li:has(.ruler-tick:focus-visible) .ruler-label {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.post-ruler .ruler-tick,
	.post-ruler .ruler-label {
		transition: none;
	}
}