/* ==========================================================================
   Notes. Page-local layout only; everything visual is the system's.
   ========================================================================== */

/* A note's sections are bands with stick labels, the CV's grammar, so the
   page needs no heading styles of its own: the system's label carries them. */

/* The list of notes: the index component off the floor, sitting under the
   lede at the band step instead of the bottom of the window. */
.notes-list {
	padding-top: var(--s7);
}

/* A note's ledger: terms and what they mean, two columns of them. Each entry
   is a hairline-topped cell with the term over its meaning, filled row by row,
   so an odd count simply leaves the last row half empty. One column when the
   window cannot hold two. */
.ledger {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--gutter);
}

.ledger__row {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	border-top: var(--rule-w) solid var(--rule);
	padding: var(--s3) 0;
}

.ledger__term {
	font-weight: 500;
}

/* The term carries the weight, the meaning carries the grey: the same
   hierarchy every list on the site uses, so the terms scan in one pass. */
.ledger__row > :not(.ledger__term) {
	color: var(--ink-muted);
}

@media (max-width: 600px) {
	.ledger {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* An open slot in a draft: visibly not yet written. */
.slot {
	color: var(--ink-muted);
}

/* --- The cycle -------------------------------------------------------- */

/* The note's cycle drawn with what the system already has: hairlines and
   chevron marks, one type size. Stations run down the left; the return edge
   leaves the last station, climbs the right side and arrives back at the
   first, which is where the chevron points. The wires are --rule like every
   other hairline; the chevrons are --grey, the mark colour, because they are
   marks. */
.cycle {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	margin: var(--s5) 0;
}

.cycle__station {
	display: flex;
	align-items: center;
	gap: var(--s3);
}

.cycle__wire {
	flex: 1;
	height: var(--rule-w);
	background: var(--rule);
	position: relative;
}

.cycle__wire--arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 3px - var(--rule-w) / 2);
	width: 6px;
	height: 6px;
	border-left: var(--rule-w) solid var(--grey);
	border-bottom: var(--rule-w) solid var(--grey);
	transform: rotate(45deg);
}

/* The step between stations, indented off the text edge like a list finding
   its next line. */
.cycle__down {
	width: var(--rule-w);
	height: var(--s4);
	margin-left: var(--s2);
	background: var(--rule);
	position: relative;
}

.cycle__down::after {
	content: "";
	position: absolute;
	left: calc(var(--rule-w) / 2 - 3px);
	bottom: 0;
	width: 6px;
	height: 6px;
	border-right: var(--rule-w) solid var(--grey);
	border-bottom: var(--rule-w) solid var(--grey);
	transform: rotate(45deg);
}

/* The climb back up, pinned between the first and last station's centres. */
.cycle::after {
	content: "";
	position: absolute;
	top: 0.75em;
	bottom: 0.75em;
	right: 0;
	width: var(--rule-w);
	background: var(--rule);
}

/* --- The cycle draws itself ------------------------------------------- */

/* The diagram is hairlines and chevrons, the develop's own materials, so
   on its first sight it develops in reading order: Insight settles, the
   step drops, station by station down to Customers, then the return edge
   draws along the bottom, climbs the right, runs back along the top, and
   the arrowhead arrives last, pointing home. site.js marks the diagram
   .arrived when the reader first reaches it; without the script, on a
   return, in print, or under reduced motion, the drawing is simply done. */
@media screen and (prefers-reduced-motion: no-preference) {
	.develop .cycle .cycle__station > span:first-child { color: var(--ink-muted); }
	.develop .cycle .cycle__wire { transform: scaleX(0); }
	.develop .cycle .cycle__wire:not(.cycle__wire--arrow) { transform-origin: left; }
	.develop .cycle .cycle__wire--arrow { transform-origin: right; }
	.develop .cycle .cycle__down { transform: scaleY(0); transform-origin: top; }
	.develop .cycle::after { transform: scaleY(0); transform-origin: bottom; }
	.develop .cycle .cycle__down::after,
	.develop .cycle .cycle__wire--arrow::before { opacity: 0; }

	.develop .cycle.arrived .cycle__station > span:first-child { animation: settle var(--t-develop) ease both; }
	.develop .cycle.arrived .cycle__down { animation: draw-down 300ms ease-out forwards; }
	.develop .cycle.arrived .cycle__down::after { animation: turn-up 300ms ease forwards; }

	.develop .cycle.arrived > :nth-child(1) > span:first-child { animation-delay: 0ms; }
	.develop .cycle.arrived > :nth-child(2) { animation-delay: 120ms; }
	.develop .cycle.arrived > :nth-child(2)::after { animation-delay: 270ms; }
	.develop .cycle.arrived > :nth-child(3) > span:first-child { animation-delay: 240ms; }
	.develop .cycle.arrived > :nth-child(4) { animation-delay: 360ms; }
	.develop .cycle.arrived > :nth-child(4)::after { animation-delay: 510ms; }
	.develop .cycle.arrived > :nth-child(5) > span:first-child { animation-delay: 480ms; }
	.develop .cycle.arrived > :nth-child(6) { animation-delay: 600ms; }
	.develop .cycle.arrived > :nth-child(6)::after { animation-delay: 750ms; }
	.develop .cycle.arrived > :nth-child(7) > span:first-child { animation-delay: 720ms; }
	.develop .cycle.arrived > :nth-child(8) { animation-delay: 840ms; }
	.develop .cycle.arrived > :nth-child(8)::after { animation-delay: 990ms; }
	.develop .cycle.arrived > :nth-child(9) > span:first-child { animation-delay: 960ms; }

	/* The return: along the bottom, up the right, back along the top. */
	.develop .cycle.arrived .cycle__station:last-child .cycle__wire { animation: draw var(--t-develop) ease-out 1080ms forwards; }
	.develop .cycle.arrived::after { animation: draw-down var(--t-develop) ease-out 1250ms forwards; }
	.develop .cycle.arrived .cycle__wire--arrow { animation: draw var(--t-develop) ease-out 1500ms forwards; }
	.develop .cycle.arrived .cycle__wire--arrow::before { animation: turn-up 300ms ease 2100ms forwards; }

	@keyframes draw-down { to { transform: scaleY(1); } }
}

/* --- The ledger develops ---------------------------------------------- */

/* The cells' hairlines are inside a band, so the band's own develop never
   reached them. A cell develops the way every list row on the site does:
   its rule draws, the term takes its weight with its ink, the meaning
   turns up — cells sighted together cascading a step apart, pairs at a
   time in the two-column grid. */
@media screen and (prefers-reduced-motion: no-preference) {
	.develop .ledger__row { border-top-color: transparent; position: relative; }
	.develop .ledger__row::before {
		content: "";
		position: absolute;
		top: calc(-1 * var(--rule-w));
		left: 0;
		right: 0;
		height: var(--rule-w);
		background: var(--rule);
		transform-origin: left;
		transform: scaleX(0);
	}
	.develop .ledger__row.arrived::before { animation: draw var(--t-develop) ease-out var(--arrive, 0ms) forwards; }

	.develop .ledger__row:not(.arrived) .ledger__term { color: var(--ink-muted); font-weight: 300; }
	.develop .ledger__row.arrived .ledger__term { animation: settle-weight var(--t-develop) ease calc(var(--arrive, 0ms) + 120ms) both; }

	.develop .ledger__row > :not(.ledger__term) { opacity: 0; }
	.develop .ledger__row.arrived > :not(.ledger__term) { animation: turn-up var(--t-develop) ease calc(var(--arrive, 0ms) + 240ms) forwards; }
}