/**
 * START HERE — navigator.css
 *
 * The interactive navigator only. Loaded on the navigator template, on top
 * of main.css, which owns the tokens.
 *
 * The organising image is a route line running down the left edge: stations
 * are stages, markers are steps, and the marker's shape — filled, hollow,
 * dashed, ticked — carries the meaning so colour is never doing the work
 * alone.
 *
 * Contents
 *   1.  App shell
 *   2.  Panels (intro, question, review, resume)
 *   3.  Question options and fields
 *   4.  You are here, journey strip, next step
 *   5.  Toolbar: filters and search
 *   6.  The tree: stages and nodes
 *   7.  Badges
 *   8.  Step detail
 *   9.  Synopsis
 *   10. Progress dashboard
 */

/* ------------------------------------------------------------------
 * 1. App shell
 * ---------------------------------------------------------------- */

.sh-app {
	padding-block: clamp(1.5rem, 4vw, 3rem);
	min-height: 60vh;
}

.sh-app__boot {
	padding: var(--sh-space-4) 0;
	color: var(--sh-quiet);
}

.sh-app__boot-text {
	margin: 0;
}

.sh-app__view:focus {
	outline: none;
}

.sh-app__view h1:focus,
.sh-app__view h1:focus-visible {
	outline-offset: 4px;
}

/* ------------------------------------------------------------------
 * 2. Panels
 * ---------------------------------------------------------------- */

.sh-panel {
	max-width: 44rem;
	margin: 0 auto;
	padding: var(--sh-space-4);
	background: var(--sh-surface);
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius);
}

.sh-panel__title {
	font-size: var(--sh-size-3);
	margin-bottom: var(--sh-space-2);
}

.sh-panel--question .sh-panel__title {
	font-size: var(--sh-size-2);
}

.sh-panel__lead {
	font-size: var(--sh-size-1);
	color: var(--sh-ink-2);
}

.sh-panel__help {
	color: var(--sh-ink-2);
}

.sh-panel__hint {
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
	margin-bottom: var(--sh-space-2);
}

.sh-panel__next {
	padding: var(--sh-space-2);
	background: var(--sh-route-tint);
	border-radius: var(--sh-radius-sm);
}

.sh-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2);
	margin-top: var(--sh-space-4);
}

.sh-panel__actions--split {
	justify-content: space-between;
}

/* Question progress */

.sh-progressbar {
	margin-bottom: var(--sh-space-3);
}

.sh-progressbar__track {
	height: 4px;
	border-radius: 2px;
	background: var(--sh-line);
	overflow: hidden;
}

.sh-progressbar__fill {
	display: block;
	height: 100%;
	background: var(--sh-route);
	transition: width 0.25s ease;
}

.sh-progressbar__label {
	margin: var(--sh-space-1) 0 0;
	font-size: var(--sh-size--2);
	letter-spacing: 0.04em;
	color: var(--sh-quiet);
}

/* Review */

.sh-review {
	border-top: 1px solid var(--sh-line);
}

.sh-review__row {
	display: grid;
	gap: 2px;
	padding: var(--sh-space-2) 0;
	border-bottom: 1px solid var(--sh-line);
}

.sh-review__question {
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

.sh-review__answer {
	font-weight: 600;
}

.sh-review__row .sh-link {
	justify-self: start;
	font-size: var(--sh-size--1);
}

/* ------------------------------------------------------------------
 * 3. Options and fields
 * ---------------------------------------------------------------- */

.sh-options {
	display: grid;
	gap: var(--sh-space-2);
}

.sh-option {
	position: relative;
}

.sh-option__input {
	position: absolute;
	top: 1.1rem;
	left: 1rem;
	margin: 0;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--sh-route);
}

.sh-option__label {
	display: block;
	padding: var(--sh-space-2) var(--sh-space-3) var(--sh-space-2) 2.75rem;
	border: 1px solid var(--sh-line-strong);
	border-radius: var(--sh-radius);
	background: var(--sh-surface);
	font-size: var(--sh-size-0);
	font-weight: 400;
	color: var(--sh-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sh-option__label:hover {
	border-color: var(--sh-route);
	background: var(--sh-route-tint);
}

.sh-option__input:checked + .sh-option__label {
	border-color: var(--sh-route);
	border-width: 2px;
	padding: calc(var(--sh-space-2) - 1px) calc(var(--sh-space-3) - 1px) calc(var(--sh-space-2) - 1px) calc(2.75rem - 1px);
	background: var(--sh-route-tint);
}

.sh-option__input:focus-visible + .sh-option__label {
	outline: 3px solid var(--sh-route);
	outline-offset: 2px;
}

.sh-option__title {
	display: block;
	font-weight: 600;
}

.sh-option__hint {
	display: block;
	margin-top: 2px;
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

.sh-fields {
	display: grid;
	gap: var(--sh-space-2);
	max-width: 26rem;
}

/* ------------------------------------------------------------------
 * 4. You are here, journey, next step
 * ---------------------------------------------------------------- */

.sh-path__header {
	margin-bottom: var(--sh-space-4);
}

.sh-path__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2);
	margin-top: var(--sh-space-3);
}

.sh-here {
	padding: var(--sh-space-3);
	border-left: 4px solid var(--sh-route);
	border-radius: 0 var(--sh-radius) var(--sh-radius) 0;
	background: var(--sh-route-tint);
	margin-bottom: var(--sh-space-3);
}

.sh-here__eyebrow {
	margin: 0 0 2px;
	font-size: var(--sh-size--2);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sh-route-deep);
}

.sh-here__stage {
	margin: 0 0 var(--sh-space-1);
	font-size: var(--sh-size-2);
}

.sh-here__objective {
	margin-bottom: var(--sh-space-1);
	color: var(--sh-ink-2);
}

.sh-here__count {
	margin: 0;
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

/* The whole journey as one strip. */

.sh-journey {
	margin-bottom: var(--sh-space-4);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sh-journey__list {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0 0 var(--sh-space-2);
	list-style: none;
	min-width: max-content;
}

.sh-journey__stop {
	position: relative;
	margin: 0;
	padding-top: var(--sh-space-3);
	padding-right: var(--sh-space-3);
}

/* The route line the station dots sit on. */
.sh-journey__stop::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--sh-line-strong);
}

.sh-journey__stop:first-child::before {
	left: 6px;
}

.sh-journey__stop:last-child::before {
	right: calc(100% - 6px);
}

.sh-journey__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sh-surface);
	border: 2px solid var(--sh-line-strong);
}

.sh-journey__button {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--sh-size--1);
	color: var(--sh-ink-2);
	text-align: left;
	cursor: pointer;
}

.sh-journey__button:hover .sh-journey__label {
	color: var(--sh-route);
	text-decoration: underline;
}

.sh-journey__label {
	display: block;
}

.sh-journey__count {
	display: block;
	font-size: var(--sh-size--2);
	color: var(--sh-quiet);
}

.sh-journey__here {
	display: block;
	font-size: var(--sh-size--2);
	font-weight: 700;
	color: var(--sh-route-deep);
}

.sh-journey__stop.is-past .sh-journey__dot {
	background: var(--sh-line-strong);
}

.sh-journey__stop.is-current .sh-journey__dot {
	background: var(--sh-route);
	border-color: var(--sh-route);
	box-shadow: 0 0 0 3px var(--sh-route-tint);
}

.sh-journey__stop.is-current .sh-journey__label {
	font-weight: 700;
	color: var(--sh-ink);
}

.sh-journey__stop.is-future .sh-journey__dot {
	border-style: dashed;
}

/* Next best step */

.sh-next {
	padding: var(--sh-space-3);
	margin-bottom: var(--sh-space-4);
	background: var(--sh-surface);
	border: 2px solid var(--sh-route);
	border-radius: var(--sh-radius);
}

.sh-next--done {
	border-color: var(--sh-line-strong);
	border-style: dashed;
}

.sh-next__eyebrow {
	margin: 0 0 2px;
	font-size: var(--sh-size--2);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sh-route-deep);
}

.sh-next__title {
	margin-bottom: var(--sh-space-1);
	font-size: var(--sh-size-2);
}

.sh-next__why {
	color: var(--sh-ink-2);
}

.sh-next__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sh-space-2);
}

.sh-next__effort {
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

.sh-flags {
	display: grid;
	gap: var(--sh-space-2);
	margin-bottom: var(--sh-space-4);
}

/* ------------------------------------------------------------------
 * 5. Toolbar
 * ---------------------------------------------------------------- */

.sh-toolbar {
	display: grid;
	gap: var(--sh-space-2);
	margin-bottom: var(--sh-space-3);
}

.sh-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-1);
}

.sh-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.25rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--sh-line-strong);
	border-radius: 999px;
	background: var(--sh-surface);
	font: inherit;
	font-size: var(--sh-size--1);
	color: var(--sh-ink-2);
	cursor: pointer;
}

.sh-filter:hover {
	border-color: var(--sh-route);
	color: var(--sh-route-deep);
}

.sh-filter.is-active {
	background: var(--sh-route);
	border-color: var(--sh-route);
	color: #ffffff;
	font-weight: 600;
}

.sh-filter__count {
	font-size: var(--sh-size--2);
	opacity: 0.8;
}

.sh-searchbox__input {
	max-width: 22rem;
}

/* ------------------------------------------------------------------
 * 6. The tree
 * ---------------------------------------------------------------- */

.sh-tree {
	display: grid;
	gap: var(--sh-space-3);
}

.sh-stage {
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius);
	background: var(--sh-surface);
	overflow: hidden;
}

.sh-stage.is-current {
	border-color: var(--sh-route);
	box-shadow: inset 3px 0 0 var(--sh-route);
}

.sh-stage.is-past .sh-stage__name {
	color: var(--sh-quiet);
}

.sh-stage__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sh-space-2);
	padding: var(--sh-space-2) var(--sh-space-3);
	border-bottom: 1px solid var(--sh-line);
	background: var(--sh-paper);
}

.sh-stage.is-collapsed .sh-stage__header {
	border-bottom-color: transparent;
}

.sh-stage__toggle {
	display: flex;
	align-items: center;
	gap: var(--sh-space-2);
	flex: 1 1 auto;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.sh-stage__dot {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--sh-line-strong);
	background: var(--sh-surface);
}

.sh-stage.is-current .sh-stage__dot {
	background: var(--sh-route);
	border-color: var(--sh-route);
}

.sh-stage.is-past .sh-stage__dot {
	background: var(--sh-line-strong);
	border-color: var(--sh-line-strong);
}

.sh-stage__name {
	font-weight: 650;
}

.sh-stage__count {
	margin-left: auto;
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
	font-variant-numeric: tabular-nums;
}

/* The disclosure arrow: rotates, but only as a hint. */
.sh-stage__toggle::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: var(--sh-space-1);
	border-right: 2px solid var(--sh-quiet);
	border-bottom: 2px solid var(--sh-quiet);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.sh-stage__toggle[aria-expanded="false"]::after {
	transform: rotate(-45deg);
}

.sh-stage__here {
	margin: 0;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--sh-route);
	color: #ffffff;
	font-size: var(--sh-size--2);
	font-weight: 700;
}

.sh-stage__body {
	padding: var(--sh-space-3);
}

.sh-stage__objective {
	margin-bottom: var(--sh-space-3);
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

/* Nodes: the route line lives on the list. */

.sh-nodes {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.4rem;
	list-style: none;
}

.sh-nodes::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.75rem;
	bottom: 0.75rem;
	width: 2px;
	background: var(--sh-line);
}

.sh-node {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sh-space-2);
	margin: 0;
	padding: var(--sh-space-2) 0;
	border-bottom: 1px solid var(--sh-line);
}

.sh-node:last-child {
	border-bottom: 0;
}

.sh-node__rail {
	position: absolute;
	left: -1.4rem;
	top: 1.1rem;
	width: 14px;
	display: block;
}

.sh-node__marker {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--sh-surface);
	border: 2px solid var(--sh-line-strong);
}

.sh-node__content {
	flex: 1 1 auto;
	min-width: 0;
}

.sh-node__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.sh-node__title {
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.sh-node__open:hover .sh-node__title {
	color: var(--sh-route-deep);
	text-decoration: underline;
}

.sh-node__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-1);
	margin: var(--sh-space-1) 0 0;
	max-width: none;
}

.sh-node__waiting {
	display: block;
	margin-top: 2px;
	font-size: var(--sh-size--2);
	color: var(--sh-caution);
}

.sh-node__check {
	flex: none;
	padding-top: 0.2rem;
}

.sh-check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sh-check__label {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--sh-line-strong);
	border-radius: var(--sh-radius-sm);
	background: var(--sh-surface);
	cursor: pointer;
}

.sh-check:checked + .sh-check__label {
	border-color: var(--sh-route);
	background: var(--sh-route);
}

/* The tick is drawn, not a font glyph, so it survives any typeface. */
.sh-check:checked + .sh-check__label::after {
	content: "";
	display: block;
	width: 0.35rem;
	height: 0.7rem;
	margin: 0.08rem auto 0;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg);
}

.sh-check:focus-visible + .sh-check__label {
	outline: 3px solid var(--sh-route);
	outline-offset: 2px;
}

/* Node states. Marker shape carries the meaning; colour reinforces it. */

.sh-node--do_now .sh-node__marker {
	background: var(--sh-route);
	border-color: var(--sh-route);
	box-shadow: 0 0 0 3px var(--sh-route-tint);
}

.sh-node--next .sh-node__marker {
	border-color: var(--sh-route);
}

.sh-node--before_launch .sh-node__marker {
	border-color: var(--sh-ink-2);
}

.sh-node--conditional .sh-node__marker {
	border-color: var(--sh-caution);
	border-style: dashed;
}

.sh-node--blocked .sh-node__marker {
	border-style: dotted;
	border-color: var(--sh-quiet);
}

.sh-node--later {
	opacity: 0.8;
}

.sh-node--later .sh-node__marker {
	border-color: var(--sh-line-strong);
}

.sh-node.is-complete .sh-node__marker {
	background: var(--sh-line-strong);
	border-color: var(--sh-line-strong);
	box-shadow: none;
}

.sh-node.is-complete .sh-node__title {
	color: var(--sh-quiet);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.sh-node.is-progress .sh-node__marker {
	background: linear-gradient(90deg, var(--sh-route) 50%, var(--sh-surface) 50%);
	border-color: var(--sh-route);
}

.sh-node.is-na {
	opacity: 0.6;
}

.sh-node.is-blocked .sh-node__title {
	color: var(--sh-ink-2);
}

/* ------------------------------------------------------------------
 * 7. Badges
 * ---------------------------------------------------------------- */

.sh-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--sh-line-strong);
	border-radius: 999px;
	background: var(--sh-surface);
	font-size: var(--sh-size--2);
	line-height: 1.5;
	color: var(--sh-ink-2);
	white-space: nowrap;
}

/* A small shape next to the label, so two badges are never told apart by
 * colour alone. */
.sh-badge__shape {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.sh-badge--bucket-do_now,
.sh-badge--critical {
	border-color: var(--sh-route);
	background: var(--sh-route);
	color: #ffffff;
	font-weight: 650;
}

.sh-badge--critical .sh-badge__shape {
	border-radius: 2px;
}

.sh-badge--bucket-next {
	border-color: var(--sh-route);
	color: var(--sh-route-deep);
	background: var(--sh-route-tint);
}

.sh-badge--bucket-before_launch {
	border-color: var(--sh-ink-2);
	color: var(--sh-ink-2);
}

.sh-badge--bucket-conditional,
.sh-badge--applicability {
	border-color: var(--sh-caution);
	background: var(--sh-caution-tint);
	color: var(--sh-caution);
}

.sh-badge--bucket-conditional .sh-badge__shape,
.sh-badge--applicability .sh-badge__shape {
	border-radius: 0;
	transform: rotate(45deg);
}

.sh-badge--bucket-blocked {
	border-style: dotted;
	color: var(--sh-quiet);
}

.sh-badge--bucket-blocked .sh-badge__shape {
	background: none;
	border: 2px solid currentColor;
	width: 8px;
	height: 8px;
}

.sh-badge--bucket-later {
	color: var(--sh-quiet);
}

.sh-badge--done {
	border-color: var(--sh-line-strong);
	background: var(--sh-paper);
	color: var(--sh-quiet);
}

.sh-badge--progress {
	border-color: var(--sh-route);
	color: var(--sh-route-deep);
}

.sh-badge--progress .sh-badge__shape {
	background: linear-gradient(90deg, currentColor 50%, transparent 50%);
	border: 1px solid currentColor;
}

.sh-badge--verify {
	border-color: var(--sh-stop);
	background: var(--sh-stop-tint);
	color: var(--sh-stop);
}

.sh-badge--verify .sh-badge__shape {
	border-radius: 1px;
	transform: rotate(45deg);
}

.sh-badge--priority-critical {
	border-color: var(--sh-stop);
	color: var(--sh-stop);
}

.sh-badge--priority-high {
	border-color: var(--sh-route);
	color: var(--sh-route-deep);
}

.sh-badge--priority-normal,
.sh-badge--priority-low,
.sh-badge--priority-later,
.sh-badge--priority-conditional {
	color: var(--sh-quiet);
}

/* ------------------------------------------------------------------
 * 8. Step detail
 * ---------------------------------------------------------------- */

.sh-step {
	max-width: 46rem;
	margin: 0 auto;
	padding: var(--sh-space-4);
	background: var(--sh-surface);
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius);
}

.sh-step__nav {
	margin-bottom: var(--sh-space-3);
	font-size: var(--sh-size--1);
}

.sh-step__header {
	padding-bottom: var(--sh-space-3);
	border-bottom: 2px solid var(--sh-route);
	margin-bottom: var(--sh-space-3);
}

.sh-step__stage {
	margin: 0 0 var(--sh-space-1);
	font-size: var(--sh-size--2);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sh-quiet);
}

.sh-step__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-1);
	margin: var(--sh-space-2) 0 0;
	max-width: none;
}

.sh-step__effort {
	margin: var(--sh-space-1) 0 0;
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
}

.sh-why {
	margin-bottom: var(--sh-space-3);
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-sm);
	background: var(--sh-paper);
}

.sh-why__summary {
	padding: var(--sh-space-2);
	font-weight: 600;
	color: var(--sh-route-deep);
	cursor: pointer;
}

.sh-why__body {
	padding: 0 var(--sh-space-2) var(--sh-space-2);
	font-size: var(--sh-size-0);
	color: var(--sh-ink-2);
}

.sh-why__body p:last-child {
	margin-bottom: 0;
}

.sh-step__section {
	margin-bottom: var(--sh-space-3);
	padding-bottom: var(--sh-space-3);
	border-bottom: 1px solid var(--sh-line);
}

.sh-step__section:last-of-type {
	border-bottom: 0;
}

.sh-step__heading {
	font-size: var(--sh-size--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sh-quiet);
	margin-bottom: var(--sh-space-2);
}

/* The lesson prose is set in the reading face; the interface around it
 * stays in the UI face. */
.sh-step__section p,
.sh-step__section li {
	font-family: var(--sh-font-read);
	font-size: var(--sh-size-1);
	line-height: 1.62;
}

.sh-step__section--action {
	padding: var(--sh-space-3);
	border: 1px solid var(--sh-route);
	border-left-width: 4px;
	border-radius: var(--sh-radius-sm);
	background: var(--sh-route-tint);
}

.sh-step__section--wait {
	color: var(--sh-ink-2);
}

.sh-list {
	margin: 0;
	padding-left: 1.1rem;
}

.sh-reference {
	font-size: var(--sh-size--1);
}

.sh-reference__meta {
	font-family: var(--sh-font-ui) !important;
	font-size: var(--sh-size--2) !important;
	color: var(--sh-quiet);
}

.sh-status {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-1);
}

.sh-status__button {
	min-height: 2.5rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--sh-line-strong);
	border-radius: var(--sh-radius-sm);
	background: var(--sh-surface);
	font: inherit;
	font-size: var(--sh-size--1);
	color: var(--sh-ink-2);
	cursor: pointer;
}

.sh-status__button:hover {
	border-color: var(--sh-route);
	color: var(--sh-route-deep);
}

.sh-status__button.is-active {
	background: var(--sh-route);
	border-color: var(--sh-route);
	color: #ffffff;
	font-weight: 650;
}

.sh-step__next .sh-button {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

.sh-step__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2);
	margin-top: var(--sh-space-4);
}

/* ------------------------------------------------------------------
 * 9. Synopsis
 * ---------------------------------------------------------------- */

.sh-synopsis {
	margin-top: var(--sh-space-5);
	padding-top: var(--sh-space-4);
	border-top: 1px solid var(--sh-line);
}

.sh-synopsis__list {
	display: grid;
	gap: var(--sh-space-3);
	margin: var(--sh-space-3) 0 0;
	padding: 0 0 0 1.4rem;
	list-style: none;
	position: relative;
}

.sh-synopsis__list::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	background: var(--sh-line);
}

.sh-synopsis__item {
	position: relative;
	margin: 0;
}

.sh-synopsis__item::before {
	content: "";
	position: absolute;
	left: -1.4rem;
	top: 0.45rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sh-surface);
	border: 2px solid var(--sh-line-strong);
}

.sh-synopsis__item.is-past::before {
	background: var(--sh-line-strong);
}

.sh-synopsis__item.is-current::before {
	background: var(--sh-route);
	border-color: var(--sh-route);
}

.sh-synopsis__item.is-future {
	color: var(--sh-ink-2);
}

.sh-synopsis__item.is-future::before {
	border-style: dashed;
}

.sh-synopsis__phase {
	margin: 0 0 2px;
	font-size: var(--sh-size--2);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sh-quiet);
}

.sh-synopsis__item.is-current .sh-synopsis__phase {
	color: var(--sh-route-deep);
}

.sh-synopsis__text {
	margin: 0 0 2px;
	font-family: var(--sh-font-read);
	font-size: var(--sh-size-1);
}

.sh-synopsis__headline {
	margin: 0 0 2px;
	font-size: var(--sh-size--1);
	color: var(--sh-ink-2);
}

.sh-synopsis__count {
	margin: 0;
	font-size: var(--sh-size--2);
	color: var(--sh-quiet);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * 10. Progress dashboard
 * ---------------------------------------------------------------- */

.sh-progress__list {
	display: grid;
	gap: var(--sh-space-2);
	margin: var(--sh-space-4) 0;
	padding: 0;
	list-style: none;
}

.sh-progress__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem var(--sh-space-2);
	align-items: center;
	margin: 0;
}

.sh-progress__label {
	font-weight: 600;
}

.sh-progress__row.is-current .sh-progress__label {
	color: var(--sh-route-deep);
}

.sh-progress__bar {
	grid-column: 1 / -1;
	display: block;
	height: 8px;
	border-radius: 4px;
	background: var(--sh-line);
	overflow: hidden;
}

.sh-progress__fill {
	display: block;
	height: 100%;
	background: var(--sh-route);
}

.sh-progress__count {
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
	font-variant-numeric: tabular-nums;
}

.sh-buckets {
	display: grid;
	gap: var(--sh-space-3);
	margin-bottom: var(--sh-space-4);
}

.sh-bucket {
	padding: var(--sh-space-3);
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius);
	background: var(--sh-surface);
}

.sh-bucket__count {
	display: inline-block;
	min-width: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--sh-route-tint);
	color: var(--sh-route-deep);
	font-size: var(--sh-size--2);
	text-align: center;
}

.sh-bucket__description {
	font-size: var(--sh-size--1);
	color: var(--sh-quiet);
	margin-bottom: var(--sh-space-2);
}

.sh-bucket__list {
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--sh-size-0);
}

.sh-empty {
	padding: var(--sh-space-4);
	border: 1px dashed var(--sh-line-strong);
	border-radius: var(--sh-radius);
	color: var(--sh-quiet);
	text-align: center;
}