/**
 * Two-Path Process block (template-parts/blocks/block-two-path-process.php).
 *
 * Every value reads a --tpp-* token from Design Tokens → Blocks → Two-Path
 * Process (inc/two-path-process-tokens.php) and falls back to the site's
 * existing tokens, so a blank option never breaks the block. The private
 * --_* vars below are the resolved values; rules only read those.
 *
 * Without JS (.tpp without .is-enhanced) every step shows stacked and the
 * chart is hidden. Layout: .tpp--side (vertical chart left, details right,
 * from 900px) or .tpp--stacked (wide chart above details, from 721px).
 * Phones (≤720px) always stack with the vertical chart.
 */

.tpp {
	/* Colors — palette selects */
	--_shared:          var(--tpp-shared, var(--colJ, #262626));
	--_look:            var(--tpp-look, var(--colA, #355067));
	--_structure:       var(--tpp-structure, var(--colE, #bbc157));
	--_structure-label: var(--tpp-structure-label, var(--colD, #656259));
	--_text:            var(--tpp-text, var(--colJ, #262626));
	--_muted:           var(--tpp-muted, var(--colI, #636363));
	--_line:            var(--tpp-line, var(--colG, #e5e5e5));
	--_sel-disc:        var(--tpp-selected-disc, var(--colH, #b2b2b2));
	--_sel-node:        var(--tpp-selected-node, #ffffff);
	--_card-bg:         var(--tpp-card-bg, #ffffff);
	--_chip-bg:         var(--tpp-chip-bg, var(--colG, #e5e5e5));

	/* Spacing, shape, motion */
	--_pad:          var(--tpp-card-pad, var(--spacing-scale-large, 2rem));
	--_pad-sm:       var(--tpp-card-pad-sm, var(--spacing-scale-default, 1rem));
	--_gap:          var(--tpp-gap, var(--spacing-scale-large, 2rem));
	--_inner:        var(--tpp-inner-gap, var(--spacing-scale-default, 1rem));
	--_tight:        var(--tpp-dot-gap, var(--spacing-scale-small, 0.5rem));
	--_card-radius:  var(--tpp-card-radius, var(--radius-role-large, 1rem));
	--_img-radius:   var(--tpp-image-radius, var(--radius-role-default, 0.5rem));
	--_path-w:       var(--tpp-path-width, var(--stroke-width-role-thick, 3px));
	--_border-w:     var(--tpp-border-width, var(--stroke-width-role-hairline, 1px));
	--_shadow:       var(--tpp-card-shadow, none);
	--_hover-dur:    var(--tpp-hover-duration, var(--anim-role-fast-duration, 150ms));
	--_hover-ease:   var(--tpp-hover-ease, var(--anim-role-fast-ease, ease));
	--_slide-dur:    var(--tpp-slide-duration, var(--anim-role-default-duration, 300ms));
	--_slide-ease:   var(--tpp-slide-ease, var(--anim-role-default-ease, ease));

	/* Clears the site's floating nav when the panel sticks or a link scrolls to the chart. */
	--_offset: 100px;

	/* Path accent for the current step — set per step below */
	--_k:      var(--_shared);
	--_k-text: var(--_shared);

	display: grid;
	gap: var(--_gap);
	color: var(--_text);
	margin-block: var(--_gap);
}

.tpp *,
.tpp *::before,
.tpp *::after { box-sizing: border-box; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.tpp__chart,
.tpp__panel {
	margin: 0;
	background: var(--_card-bg);
	border: var(--_border-w) solid var(--_line);
	border-radius: var(--_card-radius);
	box-shadow: var(--_shadow);
	min-width: 0;
}

.tpp__chart { padding: var(--_pad) calc(var(--_pad) / 2); }
.tpp__panel { padding: var(--_pad); }

/* ── Chart ──────────────────────────────────────────────────────────────── */

.tpp:not(.is-enhanced) .tpp__chart { display: none; }

.tpp__svg { display: none; width: 100%; height: auto; overflow: visible; }
.tpp--stacked .tpp__svg--wide { display: block; }
.tpp--side .tpp__svg--tall { display: block; max-width: 440px; margin: 0 auto; }

.tpp__hint {
	margin: var(--_inner) 0 0;
	text-align: center;
	color: var(--_muted);
	font-family: var(--tpp-caption-family, var(--text-role-small-family, var(--font-primary)));
	font-size: var(--tpp-caption-size, var(--text-role-small-size, 0.9375rem));
	line-height: 1.4;
}

.tpp__path { fill: none; stroke-width: var(--_path-w); stroke-linecap: round; }
.tpp__path--shared { stroke: var(--_shared); }
.tpp__path--look { stroke: var(--_look); }
.tpp__path--structure { stroke: var(--_structure); }
.tpp__path--tail { stroke: var(--_shared); stroke-dasharray: 1 9; }

.tpp__dot { fill: var(--_shared); transition: fill var(--_hover-dur) var(--_hover-ease); }
.tpp__node[data-path="look"] .tpp__dot { fill: var(--_look); }
.tpp__node[data-path="structure"] .tpp__dot { fill: var(--_structure); }

.tpp__name,
.tpp__sub,
.tpp__track-label {
	paint-order: stroke;
	stroke: var(--_card-bg);
	stroke-width: 6px;
	stroke-linejoin: round;
}
.tpp__name {
	fill: var(--_text);
	font-family: var(--tpp-step-name-family, var(--text-role-subheadb-family, var(--font-primary)));
	font-weight: var(--tpp-step-name-weight, var(--text-role-subheadb-weight, 700));
	font-size: 17px; /* SVG user units — scales with the chart */
}
.tpp__sub {
	fill: var(--_muted);
	font-family: var(--tpp-caption-family, var(--text-role-small-family, var(--font-primary)));
	font-size: 14px;
}
.tpp__track-label {
	font-family: var(--tpp-eyebrow-family, var(--text-role-small-family, var(--font-primary)));
	font-weight: var(--tpp-eyebrow-weight, 700);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-anchor: middle;
}
.tpp__track-label--look { fill: var(--_look); }
.tpp__track-label--structure { fill: var(--_structure-label); }
.tpp__track-label--start { fill: var(--_muted); }

.tpp__node { cursor: pointer; outline: none; }
.tpp__hit,
.tpp__hitbox { fill: transparent; }
.tpp__halo {
	fill: none;
	stroke: var(--_shared);
	stroke-width: 3;
	opacity: 0;
	transition: opacity var(--_hover-dur) var(--_hover-ease);
}
.tpp__node[data-path="look"] .tpp__halo { stroke: var(--_look); }
.tpp__node[data-path="structure"] .tpp__halo { stroke: var(--_structure); }
.tpp__node:hover .tpp__halo { opacity: 0.35; }
.tpp__node:focus-visible .tpp__halo { opacity: 0.6; stroke-dasharray: 4 3; }

/* Selected: solid disc behind the node, node turns white. */
.tpp__node.is-selected .tpp__halo { opacity: 1; fill: var(--_sel-disc); stroke: none; }
.tpp__node.is-selected .tpp__dot { fill: var(--_sel-node); }

/* ── Panel ──────────────────────────────────────────────────────────────── */

.tpp__step[data-path="look"]      { --_k: var(--_look);      --_k-text: var(--_look); }
.tpp__step[data-path="structure"] { --_k: var(--_structure); --_k-text: var(--_structure-label); }

.tpp:not(.is-enhanced) .tpp__panel { display: grid; gap: var(--_gap); }
.tpp:not(.is-enhanced) .tpp__step + .tpp__step { border-top: var(--_border-w) solid var(--_line); padding-top: var(--_gap); }
.tpp.is-enhanced .tpp__step:not(.is-current) { display: none; }

.tpp__step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--_gap);
	align-items: start;
}
.tpp__step:not(:has(.tpp__media)) { grid-template-columns: minmax(0, 1fr); }

.tpp__text { display: grid; gap: var(--_inner); min-width: 0; align-content: start; }
.tpp__text > * { margin: 0; }

.tpp__to-chart { display: none; justify-self: start; color: var(--_muted); text-decoration: none; font-size: 0.875rem; }
.tpp__to-chart:hover { color: var(--_text); }

.tpp__tag,
.tpp__goals-heading {
	font-family: var(--tpp-eyebrow-family, var(--text-role-small-family, var(--font-primary)));
	font-weight: var(--tpp-eyebrow-weight, 700);
	font-style: var(--tpp-eyebrow-style, normal);
	font-size: var(--tpp-eyebrow-size, 0.8125rem);
	line-height: var(--tpp-eyebrow-line-height, 1.2);
	letter-spacing: var(--tpp-eyebrow-letter-spacing, 0.12em);
	text-transform: var(--tpp-eyebrow-text-transform, uppercase);
}
.tpp__tag { display: inline-flex; align-items: center; gap: var(--_tight); color: var(--_muted); }
.tpp__tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--_k); flex: none; }

.tpp .tpp__title {
	margin: 0;
	color: var(--_text);
	font-family: var(--tpp-title-family, var(--h2-font, var(--font-primary)));
	font-weight: var(--tpp-title-weight, var(--h2-weight, 700));
	font-style: var(--tpp-title-style, normal);
	font-size: var(--tpp-title-size, clamp(var(--h2-size-min, 1.5rem), 3vw, var(--h2-size-max, 2.441rem)));
	line-height: var(--tpp-title-line-height, 1.15);
	letter-spacing: var(--tpp-title-letter-spacing, var(--h2-tracking, 0em));
	text-transform: var(--tpp-title-text-transform, var(--h2-transform, none));
	text-wrap: balance;
}

.tpp__desc,
.tpp__goals li,
.tpp__items li {
	font-family: var(--tpp-body-family, var(--font-primary));
	font-weight: var(--tpp-body-weight, 400);
	font-style: var(--tpp-body-style, normal);
	font-size: var(--tpp-body-size, var(--text-role-default-size, 1.125rem));
	line-height: var(--tpp-body-line-height, 1.5);
	letter-spacing: var(--tpp-body-letter-spacing, 0em);
	text-transform: var(--tpp-body-text-transform, none);
	max-width: 60ch;
}

.tpp__goals-heading { color: var(--_k-text); margin: 0 0 var(--_tight); }
.tpp__goals ul { margin: 0; display: grid; gap: calc(var(--_tight) / 2); }
/* Goals keep the site's own "•" list bullet (SDstandards), tinted with the path color. */
#SD .tpp .tpp__goals li::before { color: var(--_k); }

.tpp__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--_tight);
	margin: 0;
	padding: 0;
	list-style: none;
}
#SD .tpp .tpp__items li { margin: 0; background: var(--_chip-bg); border-radius: var(--_img-radius); padding: var(--_tight) calc(var(--_tight) * 1.5); font-size: 0.9375rem; line-height: 1.4; min-width: 0; }
#SD .tpp .tpp__items li::before { content: none; } /* cards, not a bulleted list */
.tpp__items b { display: block; color: var(--_text); }
.tpp__items span { color: var(--_muted); }

/* Prev / next — Secondary button style (buttons.css); only layout here. */
.tpp__nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--_tight);
	border-top: var(--_border-w) solid var(--_line);
	padding-top: var(--_inner);
}
.tpp:not(.is-enhanced) .tpp__nav { display: none; }
.tpp__nav .button:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* ── Images + slider ────────────────────────────────────────────────────── */

.tpp__media { display: grid; gap: var(--_tight); min-width: 0; }

.tpp__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--_img-radius);
}
.tpp__track::-webkit-scrollbar { display: none; }

.tpp .tpp__shot {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: var(--_border-w) solid var(--_line);
	border-radius: var(--_img-radius);
	overflow: hidden;
	background: #ffffff;
	cursor: zoom-in;
}
/* contain, not cover: the whole image always shows, letterboxed in a steady 4:3 frame. */
.tpp__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: 50% 50%; }
.tpp__shot:focus-visible { outline: 3px solid var(--_look); outline-offset: 3px; }
.tpp__open {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--_text);
	color: var(--_card-bg);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
}

.tpp__slider-nav { display: flex; align-items: center; justify-content: center; gap: var(--_inner); }
.tpp:not(.is-enhanced) .tpp__slider-nav { display: none; }
.tpp .tpp__arrow {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--btn-secondary-bg, var(--colA));
	color: var(--btn-secondary-text, #ffffff);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--_hover-dur) var(--_hover-ease);
}
.tpp .tpp__arrow:hover { background: var(--btn-secondary-hover-bg, var(--colC)); color: var(--btn-secondary-hover-text, #ffffff); }
.tpp .tpp__arrow:disabled { opacity: 0.35; cursor: default; }
.tpp__dots { display: flex; gap: var(--_tight); }
.tpp .tpp__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--_line); cursor: pointer; }
.tpp .tpp__dots button[aria-current="true"] { background: var(--_text); }

.tpp__caption {
	margin: 0;
	color: var(--_muted);
	font-family: var(--tpp-caption-family, var(--text-role-small-family, var(--font-primary)));
	font-weight: var(--tpp-caption-weight, 400);
	font-size: var(--tpp-caption-size, var(--text-role-small-size, 0.9375rem));
	line-height: var(--tpp-caption-line-height, 1.4);
}
.tpp__caption:empty { display: none; }
.tpp__note {
	margin: 0;
	color: var(--_muted);
	font-family: var(--tpp-caption-family, var(--text-role-small-family, var(--font-primary)));
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4;
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */

.tpp__lightbox {
	width: min(1200px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	padding: 0;
	border: var(--_border-w) solid var(--_line);
	border-radius: var(--_card-radius);
	background: var(--_card-bg);
	color: var(--_text);
}
.tpp__lightbox::backdrop { background: rgb(10 14 12 / 0.72); }
.tpp__lb-head { position: sticky; top: 0; display: flex; align-items: center; gap: var(--_tight); padding: 12px 16px; border-bottom: var(--_border-w) solid var(--_line); background: var(--_card-bg); }
.tpp__lb-caption { flex: 1; min-width: 0; margin: 0; color: var(--_muted); font-size: 0.9375rem; }
.tpp .tpp__lb-head button { padding: 7px 14px; border: 0; border-radius: 999px; background: var(--_chip-bg); color: var(--_text); font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.tpp__lb-step { display: flex; align-items: center; gap: 6px; }
.tpp__lb-step[hidden] { display: none; }
.tpp .tpp__lb-head .tpp__lb-step button { width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1; }
.tpp .tpp__lb-head .tpp__lb-step button:disabled { opacity: 0.35; cursor: default; }
.tpp__lb-count { min-width: 3.5em; text-align: center; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tpp__lb-body { overflow: auto; max-height: calc(100vh - 90px); background: #ffffff; }
.tpp__lb-body img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; }
.tpp__lb-body.is-zoom img { width: auto; }
.tpp__lb-body.is-sliding { overflow-x: hidden; }

/* ── Layouts ────────────────────────────────────────────────────────────── */

/* Side by side: vertical chart left, details right (stacked text over image), details stay in view. */
@media (min-width: 900px) {
	.tpp--side.is-enhanced { grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); align-items: start; }
	.tpp--side .tpp__panel { position: sticky; top: var(--_offset); }
	.tpp--side .tpp__step { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
	.tpp--side .tpp__step { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.tpp__step { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: vertical chart without subtitles and with bigger names, no note, back-to-chart link. */
@media (max-width: 720px) {
	.tpp--stacked .tpp__svg--wide { display: none; }
	.tpp--stacked .tpp__svg--tall { display: block; max-width: 440px; margin: 0 auto; }
	.tpp__svg--tall .tpp__sub { display: none; }
	.tpp__svg--tall .tpp__name { font-size: 21px; }
	.tpp__svg--tall .tpp__name.has-sub { transform: translateY(8px); } /* re-center once the subtitle is hidden */
	.tpp__chart { padding: var(--_pad-sm); }
	.tpp__panel { padding: var(--_pad-sm); }
	.tpp.is-enhanced .tpp__to-chart { display: inline-block; }
}

.tpp__chart,
.tpp__panel { scroll-margin-top: var(--_offset); }
@media (max-width: 720px) {
	.tpp { --_offset: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	.tpp__halo,
	.tpp__dot,
	.tpp .tpp__arrow { transition: none; }
}