/*
Widget stylesheet for AW Timeline: the Problem section's failure, day by day.
Phone first, then 760px and 1024px. Every colour, size and easing comes from tokens.css.
At rest the timeline is finished: the fill is full and the day numbers sit in signal, so the
page is complete with no JavaScript and in Calm mode. The behaviour script (T-033,
assets/js/timeline.js) adds .aw-timeline.is-live, then writes --p and toggles .is-hot.
Last task: T-032 rework, 21 Oct 2026: the paper tone's orange text moved to --signal-text.
*/

.aw-timeline {
	/* --p is the rail fill, 0 to 1. T-033 scrubs it; at rest it is full. */
	--p: 1;
	--aw-tl-num: 64px;
	--aw-tl-day: var(--mist);
	--aw-tl-rule: var(--rule);
	--aw-tl-text: var(--paper);
	--aw-tl-outline: var(--mist);
	/* The accent is the orange used for the day numbers and day labels. On the ink band it is
	   --signal; on paper it is --signal-text, because --signal is 2.74:1 on --paper and CLAUDE.md
	   forbids orange text on light backgrounds. */
	--aw-tl-accent: var(--signal);

	color: var(--aw-tl-text);
}

/* The Problem section is an ink band, which is the default. On paper the widget takes ink text
   and the muted grey for its small caps, so it stays readable outside the ink band. */
.aw-timeline--paper {
	--aw-tl-day: var(--muted);
	--aw-tl-rule: var(--sand);
	--aw-tl-text: var(--ink);
	--aw-tl-outline: var(--muted);
	--aw-tl-accent: var(--signal-text);
}

.aw-timeline__label {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-label);
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aw-tl-day);
}

/* Phone: one vertical list. The big numbers on the rail are a desktop device. */
.aw-timeline__nums,
.aw-timeline__track {
	display: none;
}

.aw-timeline__events {
	display: grid;
	gap: 30px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.aw-timeline__ev {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: start;
	gap: 4px 16px;
}

.aw-timeline__ev-num {
	grid-row: span 2;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--aw-tl-num);
	line-height: 0.8;
	color: var(--aw-tl-accent);
	-webkit-text-stroke: 1.5px var(--aw-tl-accent);
	transition: color var(--t-state) ease, -webkit-text-stroke-color var(--t-state) ease;
}

.aw-timeline__ev-day {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aw-tl-accent);
	transition: color var(--t-state) ease;
}

.aw-timeline__ev-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
}

/* Live and not yet reached: outline numbers, plain day labels. */
.aw-timeline.is-live .aw-timeline__ev:not(.is-hot) .aw-timeline__ev-num {
	color: transparent;
	-webkit-text-stroke-color: var(--aw-tl-outline);
}

.aw-timeline.is-live .aw-timeline__ev:not(.is-hot) .aw-timeline__ev-day {
	color: var(--aw-tl-day);
}

.aw-timeline__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--aw-tl-rule);
}

.aw-timeline__tag {
	flex: none;
}

.aw-timeline__tag-body {
	fill: var(--signal);
}

.aw-timeline__tag-tick {
	stroke: var(--ink);
}

.aw-timeline__foot-text {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Tablet: the list stays vertical; only the spacing opens up. */
@media (min-width: 760px) {
	.aw-timeline__events {
		gap: 34px;
	}

	.aw-timeline__ev {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 6px 24px;
	}

	.aw-timeline {
		--aw-tl-num: 80px;
	}
}

/* Desktop: the horizontal timeline with the rail, the travelling dot and three event columns. */
@media (min-width: 1024px) {
	.aw-timeline {
		--aw-tl-num: 120px;
	}

	.aw-timeline__nums {
		display: block;
		position: relative;
		height: 100px;
		margin: 22px 0 0;
		padding: 0;
		list-style: none;
	}

	/* Each number sits at its position on the rail and pulls itself back by that share of its own
	   width, so the first one is flush left and the last is flush right at any count. */
	.aw-timeline__num {
		position: absolute;
		top: 0;
		left: calc(var(--pos, 0) * 100%);
		transform: translateX(calc(var(--pos, 0) * -100%));
		font-family: var(--font-display);
		font-weight: 800;
		font-size: var(--aw-tl-num);
		line-height: 0.8;
		color: var(--aw-tl-accent);
		-webkit-text-stroke: 1.5px var(--aw-tl-accent);
		transition: color var(--t-state) ease, -webkit-text-stroke-color var(--t-state) ease;
	}

	.aw-timeline.is-live .aw-timeline__num:not(.is-hot) {
		color: transparent;
		-webkit-text-stroke-color: var(--aw-tl-outline);
	}

	.aw-timeline__track {
		display: block;
		position: relative;
		height: 24px;
		margin-top: 6px;
	}

	.aw-timeline__rail {
		position: absolute;
		left: 0;
		right: 0;
		top: 11px;
		height: 2px;
		background-image: repeating-linear-gradient(
			90deg,
			var(--muted) 0 6px,
			transparent 6px 14px
		);
	}

	.aw-timeline__fill {
		position: absolute;
		left: 0;
		right: 0;
		top: 10px;
		height: 4px;
		background: var(--signal);
		transform-origin: left center;
		transform: scaleX(var(--p, 1));
	}

	.aw-timeline__dot {
		position: absolute;
		top: 4px;
		left: calc(var(--p, 1) * (100% - 16px));
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--paper);
		box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal) 35%, transparent);
	}

	.aw-timeline__events {
		grid-template-columns: minmax(0, 40fr) minmax(0, 33fr) minmax(0, 27fr);
		gap: 22px 0;
		margin-top: 24px;
		align-content: start;
	}

	.aw-timeline__ev {
		display: block;
		grid-column: var(--col, auto);
		padding-right: 32px;
	}

	.aw-timeline__ev[data-col="3"] {
		padding-right: 0;
		text-align: right;
	}

	.aw-timeline__ev-num {
		display: none;
	}

	.aw-timeline__ev + .aw-timeline__ev {
		margin-top: 0;
	}

	.aw-timeline__ev-text {
		margin-top: 6px;
	}

	.aw-timeline__foot {
		margin-top: 44px;
	}
}

/* Calm mode and reduced motion: no colour fade, the states simply change. base.css already
   removes transitions there; this keeps the widget honest if base.css ever changes. */
@media (prefers-reduced-motion: reduce) {
	.aw-timeline__ev-num,
	.aw-timeline__num,
	.aw-timeline__ev-day {
		transition: none;
	}
}