/* Supply-chain journey (SRS 05). Default markup = text mode (works without JS); JS sets data-mode="full|lite|text". */

.ks-journey { background: var(--ks-black); color: var(--ks-white); }
.ks-journey__intro {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4);
	padding-top: var(--space-7); padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.ks-journey__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.ks-quality { display: inline-flex; align-items: center; gap: var(--space-2); }
.ks-quality[hidden] { display: none; }
.ks-quality button {
	min-height: 32px; min-width: 44px; padding: 0 var(--space-3);
	border: 1px solid var(--color-border); background: transparent; color: var(--color-on-surface);
	font: 500 var(--fs-technical)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.ks-quality button[aria-checked="true"] { background: var(--ks-white); color: var(--ks-black); border-color: var(--ks-white); }

/* ---------- Text mode (default / no-JS / reduced data / zoom) ---------- */
.ks-journey .ks-stage { position: relative; }
.ks-journey .ks-stage__card { padding-block: var(--space-9); border-bottom: 1px solid var(--color-border); }
.ks-journey .ks-stage__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-4); align-items: start; }
.ks-journey .ks-stage__inner > * { grid-column: 1 / span 6; }
.ks-journey .ks-stage__inner > .ks-stage__poster { grid-column: 8 / -1; grid-row: 1 / span 6; }
.ks-stage__poster:empty { display: none; }
.ks-stage__poster .ks-scene { width: 100%; aspect-ratio: 16 / 9; background: var(--ks-black); border: 1px solid var(--color-border); }
.ks-stage__name { color: var(--color-muted); }
.ks-stage__title:focus { outline: none; }
.ks-stage__title:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ks-stage__details summary { cursor: pointer; list-style: none; display: inline-flex; gap: var(--space-2); align-items: center; min-height: 44px; color: var(--color-on-surface); }
.ks-stage__details summary::-webkit-details-marker { display: none; }
.ks-stage__details summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 12px; }
.ks-stage__details[open] summary::before { content: "–"; }
.ks-stage__details .ks-facts { margin-top: var(--space-3); }
.ks-hotspot-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ks-hotspot-list p { margin: var(--space-1) 0 0 40px; color: var(--color-muted); }
.ks-stage__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ks-stage__cta { margin-top: var(--space-3); }
@media (max-width: 1023px) {
	.ks-journey .ks-stage__inner > *, .ks-journey .ks-stage__inner > .ks-stage__poster { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Pinned modes (full / lite) ---------- */
.ks-journey__viewport[hidden] { display: none; }
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-journey__viewport {
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	overflow: hidden;
	z-index: var(--z-canvas);
	background: radial-gradient(ellipse at 66% 50%, #1C1C1A 0%, var(--ks-black) 70%);
}
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-journey__track {
	position: relative;
	margin-top: -100vh; margin-top: -100svh;
	z-index: var(--z-narrative);
	pointer-events: none;
}
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage {
	height: calc(var(--vh-d) * 1vh);
	min-height: 540px;
}
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__card {
	position: sticky;
	top: max(calc(var(--nav-height) + var(--space-5)), calc(50vh - 240px));
	padding-block: 0;
	border-bottom: 0;
	opacity: var(--card-o, 0);
	transition: opacity 120ms linear;
}
.ks-journey[data-mode="lite"] .ks-stage__card { transition-duration: 450ms; }
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__inner {
	display: flex; flex-direction: column; gap: var(--space-4);
	width: calc((100% - 11 * var(--col-gap)) / 12 * 5 + 4 * var(--col-gap));
	margin-left: calc((100% - 11 * var(--col-gap)) / 12 + var(--col-gap));
	padding: var(--space-6);
	background: rgba(28, 28, 26, .94);
	border-top: 2px solid var(--ks-orange);
	pointer-events: auto;
	max-height: calc(100vh - var(--nav-height) - var(--space-8));
	overflow-y: auto;
}
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__poster { display: none; }
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__title { font-size: clamp(32px, 3.6vw, 56px); }
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-journey__intro { position: relative; z-index: calc(var(--z-narrative) + 1); background: var(--ks-black); }

.ks-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-scene--static { position: static; }
.ks-scene__group { transition: none; }
.ks-journey[data-mode="lite"] .ks-scene__group { transition: opacity 450ms var(--ease-standard); }

.ks-journey__illustrative {
	position: absolute; right: var(--gutter); bottom: var(--space-5);
	color: var(--ks-cream); opacity: .7; z-index: var(--z-annotations);
}

/* Loader: thin orange line with real progress (never an indefinite spinner). */
.ks-journey .ks-loader { transition: opacity 400ms linear; }

/* ---------- Stage rail (SCR-003) ---------- */
.ks-rail {
	position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
	z-index: var(--z-stage-rail);
	display: flex; gap: var(--space-3);
}
.ks-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-rail button {
	position: relative;
	display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
	width: 100%; min-height: 32px; padding: 0 0 0 var(--space-3);
	background: transparent; border: 0; color: var(--ks-cream); cursor: pointer; text-align: right;
	font: 500 var(--fs-technical)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.ks-rail__num { font-variant-numeric: tabular-nums; opacity: .6; }
.ks-rail__name { position: absolute; right: calc(100% + var(--space-2)); opacity: 0; transform: translateX(6px); transition: opacity var(--dur-micro), transform var(--dur-micro); white-space: nowrap; pointer-events: none; }
.ks-rail button::after { content: ""; width: 12px; height: 1px; background: currentColor; opacity: .5; transition: width var(--dur-micro), background-color var(--dur-micro); }
.ks-rail button:hover .ks-rail__name, .ks-rail button:focus-visible .ks-rail__name { opacity: 1; transform: none; }
.ks-rail__name { background: rgba(11, 11, 11, .85); padding: 4px 6px; }
.ks-rail button[aria-current] { color: var(--ks-orange); }
.ks-rail button[aria-current] .ks-rail__num { opacity: 1; }
.ks-rail button[aria-current]::after { width: 28px; background: var(--ks-orange); opacity: 1; }
.ks-rail__progress { position: relative; width: 1px; background: rgba(255, 255, 255, .18); }
.ks-rail__progress span { position: absolute; inset: 0; background: var(--ks-orange); transform-origin: top; transform: scaleY(0); }

/* ---------- Hotspots + labels over the scene ---------- */
.ks-journey__annotations { position: absolute; inset: 0; z-index: var(--z-annotations); pointer-events: none; }
.ks-hs { position: absolute; left: 0; top: 0; pointer-events: auto; animation: ks-fade-in 200ms var(--ease-out) both; }
.ks-hs .ks-hotspot { position: relative; margin: -16px 0 0 -16px; }
.ks-hs__label { position: absolute; left: 22px; top: -11px; white-space: nowrap; pointer-events: none; }
.ks-hs.is-left .ks-hs__label { left: auto; right: 22px; flex-direction: row-reverse; }
.ks-hs.is-left .ks-hs__label::before { order: 2; }
.ks-hs .ks-popover { left: 24px; top: 24px; }
.ks-hs.is-left .ks-popover { left: auto; right: 24px; }
@keyframes ks-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Header collapses while the journey is pinned: the rail becomes the navigation. */
html.ks-in-journey .ks-header { transform: translateY(-100%); }

/* ---------- Tablet / mobile ---------- */
/* Below 1024px the narrative becomes a bottom sheet (max 42vh) and the scene sits in the area above it. */
@media (max-width: 1023px) {
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-scene { height: calc(100svh - min(42svh, 360px)); top: 0; bottom: auto; }
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage { height: calc(var(--vh-m) * 1vh); min-height: 420px; }
	/* Stage sections are shorter than the sheet on phones, so the sheet is fixed and only the active one shows. */
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__card {
		position: fixed; top: auto; left: 0; right: 0; bottom: 0;
		padding-inline: 0;
		z-index: var(--z-narrative);
	}
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__inner {
		width: 100%; margin: 0;
		max-height: min(42svh, 360px);
		padding: var(--space-5) var(--gutter);
		gap: var(--space-3);
	}
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage__title { font-size: 32px; }
	.ks-rail { top: calc(var(--space-4)); right: auto; left: var(--gutter); transform: none; flex-direction: column; }
	.ks-rail ol { flex-direction: row; gap: var(--space-1); }
	.ks-rail button { min-height: 24px; min-width: 24px; justify-content: center; }
	.ks-rail button::after, .ks-rail__name { display: none; }
	.ks-rail button[aria-current] .ks-rail__num { color: var(--ks-orange); }
	.ks-rail__progress { width: 100%; height: 1px; }
	.ks-rail__progress span { transform-origin: left; transform: scaleX(var(--p, 0)) !important; }
	.ks-journey__illustrative { top: 64px; bottom: auto; left: var(--gutter); right: auto; }
	.ks-hs .ks-popover { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--space-4); width: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage { height: calc(var(--vh-d) * 0.8vh); }
}

/* Forced colours: keep structure visible. */
@media (forced-colors: active) {
	.ks-stage__inner { border: 1px solid CanvasText; }
	.ks-hotspot::before { background: Highlight; }
}

/* Static scene frames on /process and stage pages */
.ks-stage-figure { margin-bottom: var(--space-5); }
.ks-stage-figure .ks-scene { width: 100%; aspect-ratio: 16 / 9; height: auto; background: var(--ks-black); border: 1px solid var(--color-border); }

/* Only the active stage's narrative is interactive while pinned (hidden ones leave the tab order). */
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage:not([data-active]) .ks-stage__card { visibility: hidden; pointer-events: none; }
.ks-journey:is([data-mode="full"], [data-mode="lite"]) .ks-stage[data-active] .ks-stage__card { visibility: visible; }
/* The fixed sheet must disappear once the journey leaves the viewport. */
html:not(.ks-journey-visible) .ks-journey .ks-stage__card { visibility: hidden; }