/* Day folds on every New page (21 Oct 2026, helper feeds; white/fold.js). Each day is a .fold-day (datemark.fold_attrs):
	on the spine its heading carries the fold button, on a page of plain cards a .fold-head (its date and the button) sits
	over its cards. fold.js gives the days older than 7 days --fold: 1, --fold-show: flex and --fold-hide: none; without
	scripts none is set, so no fold row shows and every entry is open. The head is the row: the whole of it opens and closes the day, and
	the button's pill answers hover and press for it. */
.fold-day { --fold: 0; --fold-show: none; }
.fold-row { display: var(--fold-show); flex: none; align-items: center; gap: 6px; height: 30px; margin-left: auto; padding: 0 10px 0 13px;
	border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font: 750 13px/1 var(--font); letter-spacing: 0; white-space: nowrap;
	cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .6s var(--ease), color .6s var(--ease), scale .6s var(--ease); }
.fold-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fold-chev { flex: none; display: block; }
.fold-on > :is(.spine-date, .fold-head) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
	.fold-on > :is(.spine-date, .fold-head):hover .fold-row { background: color-mix(in srgb, var(--ink) 11%, var(--paper)); transition-duration: .35s; }
	.fold-on > .fold-head:hover .fold-row { background: color-mix(in srgb, var(--ink) 9%, var(--card)); }
}
.fold-on > :is(.spine-date, .fold-head):active .fold-row { scale: .94; transition-duration: .4s; }

/* the spine: the heading is the row, the day's first card keeps its distance from it */
.fold-day > .spine-date { margin-bottom: calc(10px - 10px * var(--fold)); }
.fold-day > .spine-list > :first-child { margin-top: calc(10px * var(--fold)); }

/* plain cards: one row in the cards' own shape, over them */
.fold-head { display: var(--fold-show); align-items: center; gap: 10px; min-height: 56px; padding: 0 12px 0 18px; border-radius: 20px; background: var(--paper); }
.fold-head .fold-row { background: var(--card); }
.fold-head .fold-date { font-weight: 850; font-size: 15px; color: var(--ink); }
.fold-head .when-ago { font-size: 13px; font-weight: 700; }
.fold-day > .fold-body > :first-child { margin-top: calc(14px * var(--fold)); }

@media (max-width: 760px) {
	.fold-head { min-height: 52px; padding: 0 10px 0 14px; border-radius: 16px; }
	.fold-row { padding: 0 9px 0 11px; }
	/* a folding day's count is in its button: on a phone its drawn tally would push the button to a line of its own */
	.fold-day .spine-tally { display: var(--fold-hide, block); }
}
@media (prefers-reduced-motion: reduce) { .fold-row { transition-duration: 0s; } }