/*
 * Skills roadmap. One grid, two compositions (rows and columns come from custom properties written by render.php).
 *  ≥1100px  waterfall roadmap: time ruler, a lane per milestone that beads at every later milestone it passes and
 *           plugs into a port on the Today panel (the near-black OUTPUT ground rising into the section).
 *  <1100px  metro line: time runs down; lanes accumulate in a gutter and run into the Today panel below.
 *
 * Three states, every layout (see "State" below). The roadmap accumulates: a step goes future, then active, then
 * completed, and never falls back to looking like a future step.
 *   future     (no class)                neutral: pale route and node, muted stamp, graphite port, dark card
 *   completed  .is-done / .is-passed     soft orange memory: orange route and node, orange stamp, tinted port and card
 *   active     .is-active / .is-current  strongest: ringed node, orange stamp chip, solid port, orange card, lifted
 * Lanes use .is-done/.is-active; the Today rail uses .is-passed/.is-current (on desktop both follow the same reading
 * position; on the metro layout the rail, which sits below the list, follows its own). "Builds on" junctions and
 * reference squares stay secondary: a junction looks like the route it sits on (orange once travelled, like every
 * bead) and the text's reference squares turn ink; neither is ever highlighted on its own.
 * The server renders the settled state (01 to n-1 completed, the last step active), so no JS, reduced motion and the
 * editor show it; view.js moves the state with the reading position. Trace temporarily lights one lane instead.
 */

rb-roadmap { display: block; }

.rb-roadmap {
	--rb-ink: #16150F;
	--rb-track: #DCD7CC;
	--rb-low: #CFC9BC;
	--rb-signal: #FF4D00;
	--rb-signal-text: #BE3A00;
	--rb-canvas: #F8F6F1;
	--rb-stage: #000001;
	--rb-paper: #F9F9F9;
	--rb-rail: 5px;
	--rb-node: 15px;
	--rb-ease: cubic-bezier(.2, 0, .2, 1);
	position: relative;
	color: var(--rb-ink);
}
/* The Today panel runs down into the OUTPUT stage, so the section that holds the roadmap ends flush with it. */
:where(.wp-block-group):has(> .rb-roadmap) { padding-bottom: 0 !important; }

.rb-roadmap__grid { position: relative; }
.rb-roadmap__list { list-style: none; margin: 0; padding: 0; display: contents; }
.rb-ms { display: contents; }

/* ---------- Text ---------- */

.rb-roadmap .rb-ms__stamp {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6E6B63;
	transition: color 240ms var(--rb-ease);
}
.rb-ms__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Montserrat, sans-serif);
	font-size: clamp(20px, 0.9rem + 0.6vw, 24px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--rb-ink);
}
.rb-ms__title, .rb-roadmap .rb-ms__text, .rb-ms__meta { position: relative; z-index: 1; width: fit-content; background: var(--rb-canvas); }
.rb-roadmap .rb-ms__text { margin: 8px 0 0; max-width: 32ch; font-size: 15px; line-height: 1.5; color: #56544E; }
/* "Builds on 02 Web": the relationship in words, next to the junctions it explains. */
.rb-roadmap .rb-ms__from {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	width: fit-content;
	margin: 12px 0 0;
	background: var(--rb-canvas);
	font-size: 12.5px;
	line-height: 1.4;
	color: #56544E;
}
.rb-ms__from-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E6B63; }
.rb-ms__ref { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rb-ink); white-space: nowrap; }
.rb-ms__ref::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1.75px var(--rb-low);
	transition: box-shadow 240ms var(--rb-ease);
}

.rb-roadmap .rb-roadmap__today-label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rb-signal);
}
.rb-roadmap .rb-roadmap__notes-label {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--display, Montserrat, sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--rb-paper);
}
.rb-roadmap .rb-roadmap__status { margin: 0; font-size: 13px; color: rgba(249, 249, 249, .6); letter-spacing: .02em; }
.rb-roadmap .rb-roadmap__status span:not(.rb-roadmap__status-sep) {
	font-family: var(--wp--preset--font-family--display, Montserrat, sans-serif);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--rb-paper);
	margin-right: 4px;
}
.rb-roadmap__status-sep { margin: 0 10px; }
.rb-roadmap .rb-roadmap__hint { display: block; margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: rgba(249, 249, 249, .6); }

/* ---------- Panel and notes ---------- */

.rb-roadmap__panel { display: block; background: var(--rb-stage); pointer-events: none; }
.rb-roadmap .rb-ms__now { position: relative; margin: 0; color: var(--rb-paper); }
/* The Today panel as connected step cards: each lane plugs into a numbered square; a wire joins each square to the
   next. Finished state (no JS, reduced motion, end of the scroll): every step reached. */
.rb-ms__port {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #1C1B17;
	box-shadow: inset 0 0 0 1.5px rgba(249, 249, 249, .2);
	font: 700 19px/1 var(--wp--preset--font-family--display, Montserrat, sans-serif); /* large text: white on orange stays legible */
	letter-spacing: -0.02em;
	color: rgba(249, 249, 249, .5);
	transition: background-color 320ms var(--rb-ease), box-shadow 320ms var(--rb-ease), color 320ms var(--rb-ease);
}
.rb-ms__lead { position: absolute; display: block; height: 2px; background: rgba(249, 249, 249, .16); transition: background-color 320ms var(--rb-ease); }
.rb-ms__wire { position: absolute; display: block; width: 2px; overflow: hidden; background: rgba(249, 249, 249, .1); }
/* A wire joins this port to the next and fills orange as the reader travels between them (view.js); the settled
   state has every wire between reached ports filled. */
.rb-ms__wire-fill {
	position: absolute;
	inset: 0;
	background: var(--rb-signal);
	transform: scaleY(0);
	transform-origin: top center;
}
.rb-roadmap .rb-ms__card {
	margin: 0;
	padding: 13px 16px 14px;
	border-radius: 14px;
	background: #121110;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	transition: background-color 260ms var(--rb-ease), box-shadow 260ms var(--rb-ease), transform 260ms var(--rb-ease);
}
.rb-ms__now-cap {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(249, 249, 249, .6);
	transition: color 240ms var(--rb-ease);
}
.rb-ms__now-text { display: block; font-size: 14px; line-height: 1.45; color: rgba(249, 249, 249, .55); transition: color 240ms var(--rb-ease); }

/* ---------- Lanes ---------- */

.rb-ms__lane { position: relative; }
.rb-ms__rail, .rb-ms__fill, .rb-ms__node, .rb-ms__bead { position: absolute; display: block; }
.rb-ms__rail { background: var(--rb-track); }
.rb-ms__fill { inset: 0; background: var(--rb-ink); transition: background-color 240ms var(--rb-ease); }
.rb-ms__node {
	width: var(--rb-node);
	height: var(--rb-node);
	border-radius: 3px;
	background: var(--rb-low);
	transition: background-color 240ms var(--rb-ease), box-shadow 420ms cubic-bezier(.3, 0, 0, 1), transform 420ms cubic-bezier(.3, 0, 0, 1);
}
.rb-ms__bead {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--rb-canvas);
	box-shadow: inset 0 0 0 2.5px var(--rb-ink);
	transition: box-shadow 200ms var(--rb-ease), background-color 200ms var(--rb-ease);
}
/* A junction: this lane feeds a later step that begins here (desktop: a bead; metro: .rb-ms__junction). It is part of
   the route it sits on: the same ring as the other beads, in the same state, told apart only by a small centre point.
   It is never highlighted on its own. */
.rb-ms__junction { position: absolute; display: none; width: 11px; height: 11px; border-radius: 3px; background: var(--rb-canvas); box-shadow: inset 0 0 0 2px var(--rb-low); transition: box-shadow 200ms var(--rb-ease); }
.rb-ms__bead.is-junction::after,
.rb-ms__junction::after { content: ""; position: absolute; inset: 4.5px; border-radius: 1px; background: var(--rb-low); transition: background-color 200ms var(--rb-ease); }
.rb-ms__junction::after { inset: 3.5px; }

.rb-ms__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.rb-roadmap .rb-ms__meta .rb-ms__stamp { margin: 0; }
.rb-ms__plus { margin-right: 5px; color: var(--rb-signal-text); }
.rb-ms__cap {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	border: 1.5px solid var(--rb-ink);
	border-radius: 4px;
	background: var(--rb-canvas);
	font: 700 11px/1 var(--wp--preset--font-family--body, Inter, sans-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rb-ink);
	white-space: nowrap;
	transition: background-color 240ms var(--rb-ease), border-color 240ms var(--rb-ease), color 240ms var(--rb-ease);
}

/* ================= Desktop: the waterfall roadmap ================= */

@media (min-width: 1100px) {
	.rb-roadmap { --rb-panel-w: clamp(300px, 27%, 340px); --rb-last: 2.5; --rb-last-fr: 2.5fr; }
	.rb-roadmap__grid {
		display: grid;
		/* One column per milestone, then the stretch to today, which is wider: the destination's text lives there. */
		grid-template-columns: repeat(var(--rb-n), minmax(0, 1fr)) minmax(0, var(--rb-last-fr)) var(--rb-panel-w);
		grid-template-rows: auto repeat(var(--rb-n), auto) minmax(120px, auto);
	}

	.rb-roadmap__ruler {
		grid-column: 1 / -2;
		grid-row: 1;
		align-self: start;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 4;
		height: 76px;
		background: var(--rb-canvas);
		border-bottom: 1px solid rgba(22, 21, 15, .14);
	}
	.rb-roadmap__tick {
		position: absolute;
		bottom: 0;
		left: calc((var(--c) - 1) * 100% / (var(--rb-n) + var(--rb-last)));
		padding: 0 0 12px 1px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		color: #6E6B63;
	}
	.rb-roadmap__tick::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 1px;
		height: 8px;
		background: rgba(22, 21, 15, .4);
	}

	.rb-roadmap__panel { grid-column: -2 / -1; grid-row: 1 / -1; border-radius: 22px 22px 0 0; }
	.rb-roadmap__panel-head { grid-column: -2 / -1; grid-row: 1; padding: 26px 24px 14px 34px; }
	.rb-roadmap .rb-roadmap__hint { grid-column: -2 / -1; grid-row: var(--rb-foot); align-self: end; margin: 0; padding: 0 30px 112px 34px; }
	.rb-roadmap .rb-roadmap__status { grid-column: -2 / -1; grid-row: var(--rb-foot); align-self: end; padding: 0 30px 44px 34px; }

	.rb-roadmap__intro {
		grid-column: 1 / span var(--rb-intro-span, 3);
		grid-row: var(--rb-intro-row) / -1;
		align-self: end;
		padding: 0 40px 56px 0;
	}

	.rb-ms__head { grid-column: var(--c) / span var(--span); grid-row: var(--r); padding: 42px 28px 26px 2px; }
	.rb-ms.is-now .rb-ms__head { padding-right: 24px; }
	.rb-ms__lane { grid-column: var(--c) / -2; grid-row: var(--r); align-self: start; height: 40px; }
	.rb-ms__node { left: 0; top: 13px; }
	.rb-ms__rail { left: 7px; right: 0; top: 18px; height: var(--rb-rail); }
	.rb-ms__fill { transform-origin: left center; }
	/* Each bead sits directly above the node of the step that began there (node centre: 7.5px into its column). */
	/* A lane spans --m grid columns, the last of them --rb-last units wide. */
	.rb-ms__lane { --units: calc(var(--m) - 1 + var(--rb-last)); }
	.rb-ms__bead { top: 14px; left: calc(100% * var(--at) / var(--units) + 1px); }

	.rb-roadmap .rb-ms__now { grid-column: -2 / -1; grid-row: var(--r); align-self: stretch; padding: 2px 22px 26px 72px; }
	.rb-ms__lead { left: 0; width: 20px; top: 19.5px; }
	.rb-ms__port { left: 20px; top: 2.5px; }
	.rb-ms__wire { left: 37px; top: 38.5px; bottom: -2.5px; }
	.rb-roadmap__panel-head { padding-left: 34px; }
}

/* ================= Tablet and phone: the metro line ================= */

@media (max-width: 1099px) {
	.rb-roadmap { --rb-step: 15px; --rb-gutter: calc(var(--rb-n) * var(--rb-step)); --rb-bleed: var(--wp--style--root--padding-left, 22px); }
	.rb-roadmap__grid { display: grid; grid-template-columns: var(--rb-gutter) minmax(0, 1fr); column-gap: 22px; }
	.rb-roadmap__ruler { display: none; }
	.rb-roadmap__intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 56px; }

	.rb-ms__head { grid-column: 2; grid-row: var(--r); padding-bottom: 40px; }
	.rb-roadmap .rb-ms__text { max-width: 44ch; }
	.rb-ms__lane { grid-column: 1; grid-row: var(--r) / var(--rb-panel); }
	.rb-ms__node { left: calc(var(--i) * var(--rb-step)); top: 3px; width: 12px; height: 12px; }
	.rb-ms__rail { left: calc(var(--i) * var(--rb-step) + 4.5px); top: 9px; bottom: 0; width: 3px; }
	.rb-ms__fill { transform-origin: center top; }
	.rb-ms__bead { display: none; }
	/* Metro junctions sit on this lane at the row of the step they feed (view.js measures --len). */
	.rb-roadmap.is-placed .rb-ms__junction { display: block; z-index: 1; left: calc(var(--i) * var(--rb-step) + .5px); top: calc(9px + var(--len, 0px) - 5.5px); }

	.rb-roadmap__panel {
		grid-column: 1 / -1;
		grid-row: var(--rb-panel) / var(--rb-panel-end);
		margin-inline: calc(-1 * var(--rb-bleed));
		border-radius: 22px 22px 0 0;
	}
	.rb-roadmap__panel-head { grid-column: 1 / -1; grid-row: var(--rb-panel); padding: 32px 0 20px; }
	.rb-roadmap .rb-roadmap__status { grid-column: 1 / -1; grid-row: calc(var(--rb-panel-end) - 1); padding: 22px 0 48px; }

	.rb-roadmap .rb-ms__now { grid-column: 1 / -1; grid-row: var(--rn); align-self: stretch; padding: 0 0 14px 52px; }
	.rb-ms__lead { display: none; }
	.rb-ms__port { left: 0; top: 0; }
	.rb-ms__wire { left: 17px; top: 36px; bottom: 0; }
}

@media (max-width: 600px) {
	.rb-roadmap { --rb-step: 11px; }
	.rb-roadmap__grid { column-gap: 16px; }
	.rb-roadmap .rb-ms__text { font-size: 14.5px; }
}

/* ================= Trace: one lane lit from where it joined to today ================= */

.rb-roadmap button.rb-ms__cap { cursor: pointer; }
.rb-roadmap button.rb-ms__cap::after { content: ""; position: absolute; inset: -10px -6px; }
.rb-roadmap button.rb-ms__cap:hover { border-color: var(--rb-signal); color: var(--rb-signal-text); }
.rb-roadmap button.rb-ms__cap:focus-visible { outline: 3px solid var(--rb-signal); outline-offset: 3px; }

.rb-roadmap[data-trace] .rb-ms__fill,
.rb-roadmap[data-trace] .rb-ms__node { background: var(--rb-low); }
.rb-roadmap[data-trace] .rb-ms__bead { box-shadow: inset 0 0 0 2.5px var(--rb-low); }
.rb-roadmap[data-trace] .rb-ms__cap { border-color: var(--rb-low); color: #6E6B63; }
.rb-roadmap[data-trace] .rb-ms__now-text,
.rb-roadmap[data-trace] .rb-ms__now-cap { color: rgba(249, 249, 249, .38); }

.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__fill,
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__node { background: var(--rb-signal); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__bead { box-shadow: inset 0 0 0 2.5px var(--rb-signal); background: #FFF0E9; }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__cap { border-color: var(--rb-signal); background: #FFF0E9; color: var(--rb-signal-text); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__port { background: var(--rb-signal); box-shadow: none; color: #fff; }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__lead { background: var(--rb-signal); }
.rb-roadmap[data-trace] .rb-ms__wire-fill { transform: none; background: rgba(249, 249, 249, .16); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__card { box-shadow: inset 0 0 0 1.5px var(--rb-signal), 0 12px 28px -18px rgba(255, 77, 0, .5); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__now-cap { color: var(--rb-signal); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__now-text { color: var(--rb-paper); }

/* ================= State: future, completed, active (outside trace) ================= */

/* Live: beads not yet passed by the reading position stay pale. */
.rb-roadmap.is-live .rb-ms__bead:not(.is-on) { box-shadow: inset 0 0 0 2.5px var(--rb-low); }

/* ---- Main roadmap: completed (soft orange memory) ---- */
.rb-roadmap:not([data-trace]) .rb-ms:is(.is-done, .is-active) .rb-ms__fill,
.rb-roadmap:not([data-trace]) .rb-ms:is(.is-done, .is-active) .rb-ms__node { background: var(--rb-signal); }
.rb-roadmap:not([data-trace]):not(.is-live) .rb-ms:is(.is-done, .is-active) .rb-ms__bead,
.rb-roadmap.is-live:not([data-trace]) .rb-ms:is(.is-done, .is-active) .rb-ms__bead.is-on { box-shadow: inset 0 0 0 2.5px var(--rb-signal); }
.rb-roadmap:not([data-trace]) .rb-ms.is-done .rb-ms__stamp { color: var(--rb-signal-text); }

/* ---- Main roadmap: active (strongest) ---- */
.rb-roadmap .rb-ms__stamp { transition: color 260ms var(--rb-ease), background-color 260ms var(--rb-ease), padding 260ms var(--rb-ease); }
.rb-roadmap:not([data-trace]) .rb-ms.is-active .rb-ms__stamp { padding: 4px 8px; border-radius: 4px; background: var(--rb-signal); color: #fff; }
.rb-roadmap:not([data-trace]) .rb-ms.is-active .rb-ms__node { box-shadow: 0 0 0 4px rgba(255, 77, 0, .2); transform: scale(1.12); }
@media (min-width: 1100px) {
	.rb-roadmap .rb-ms.is-now .rb-ms__node { width: 17px; height: 17px; margin: -1px 0 0 -1px; }
}
.rb-roadmap.is-live .rb-ms.is-now:not(.is-active, .is-done) .rb-ms__node { transform: scale(.88); }

/* ---- Builds on: junctions follow the route they sit on (travelled = orange, like every bead); reference squares in
   the text turn ink once their step is reached. Neither is ever highlighted on its own. ---- */
.rb-roadmap:not([data-trace]):not(.is-live) .rb-ms:is(.is-done, .is-active) .rb-ms__bead.is-junction::after,
.rb-roadmap.is-live:not([data-trace]) .rb-ms:is(.is-done, .is-active) .rb-ms__bead.is-junction.is-on::after { background: var(--rb-signal); }
.rb-roadmap:not([data-trace]) .rb-ms__junction:is(.is-past, .is-hot) { box-shadow: inset 0 0 0 2px var(--rb-signal); }
.rb-roadmap:not([data-trace]) .rb-ms__junction:is(.is-past, .is-hot)::after { background: var(--rb-signal); }
.rb-roadmap[data-trace] .rb-ms.is-traced .rb-ms__bead.is-junction::after { background: var(--rb-signal); }
.rb-roadmap:not([data-trace]) .rb-ms:is(.is-done, .is-active) .rb-ms__ref::before { box-shadow: inset 0 0 0 1.75px var(--rb-ink); }

/* ---- Today rail: completed ---- */
.rb-roadmap:not([data-trace]) .rb-ms.is-passed .rb-ms__port { background: rgba(255, 77, 0, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 77, 0, .7); color: #FF9A6B; }
.rb-roadmap:not([data-trace]) .rb-ms:is(.is-passed, .is-current) .rb-ms__lead { background: var(--rb-signal); }
.rb-roadmap:not([data-trace]):not(.is-live) .rb-ms.is-passed .rb-ms__wire-fill { transform: none; }
.rb-roadmap:not([data-trace]) .rb-ms.is-passed .rb-ms__card { background: #241710; box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .45); }
.rb-roadmap:not([data-trace]) .rb-ms.is-passed .rb-ms__now-cap { color: #FF8A57; }
.rb-roadmap:not([data-trace]) .rb-ms.is-passed .rb-ms__now-text { color: rgba(249, 249, 249, .82); }

/* ---- Today rail: active ---- */
.rb-roadmap:not([data-trace]) .rb-ms.is-current .rb-ms__port { background: var(--rb-signal); box-shadow: 0 0 0 4px rgba(255, 77, 0, .2); color: #fff; }
.rb-roadmap:not([data-trace]) .rb-ms.is-current .rb-ms__card {
	background: #3A1607;
	box-shadow: inset 0 0 0 1.5px var(--rb-signal), 0 16px 32px -18px rgba(255, 77, 0, .6);
	transform: translateY(-2px);
}
.rb-roadmap:not([data-trace]) .rb-ms.is-current .rb-ms__now-cap { color: #FFC2A3; }
.rb-roadmap:not([data-trace]) .rb-ms.is-current .rb-ms__now-text { color: #fff; }

.rb-roadmap__count { margin: 14px 0 0; font-size: 13px; color: rgba(249, 249, 249, .6); }
.rb-roadmap__count b { margin-right: 4px; font: 700 22px/1 var(--wp--preset--font-family--display, Montserrat, sans-serif); letter-spacing: -0.02em; color: var(--rb-signal); }

@media (prefers-reduced-motion: reduce) {
	.rb-roadmap * { transition-duration: 1ms !important; }
}