/* Purpose: Lab — Control Pod → Five Modes (template-parts/series/control-pod-scene.php, lab template).
 * Default = static, readable layout (mobile, reduced motion, no JS).
 * .pod-scene.is-live (added by the engine on ≥1024px + motion) = sticky stage. */

/* ---------- Lab chrome + quiet neighbour sections ---------- */
.lab-bar {
	border-bottom: var(--border-thin);
	background: var(--color-bg);
}
.lab-bar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	align-items: baseline;
	padding-block: var(--space-3);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.lab-bar__tag { color: var(--color-primary); }
.lab-bar__title { color: var(--color-text); }
.lab-bar__note { margin-left: auto; }

.lab-quiet {
	background: var(--color-bg);
	padding-block: clamp(6rem, 18vh, 12rem);
}
.lab-quiet__eyebrow,
.pod-scene__eyebrow,
.pod-scene__chapter,
.pod-scene__tag {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.lab-quiet__heading {
	margin: var(--space-6) 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: 0;
	color: var(--color-text-strong);
	text-wrap: balance;
}
.lab-quiet__body {
	max-width: 46ch;
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}
.pod-scene__accent { color: var(--color-primary); }

/* Section labels follow the series page: primary-red uppercase eyebrow. */
.pod-scene__eyebrow,
.pod-scene__chapter,
.pod-scene__tag { color: var(--color-primary); }
.pod-scene__tag-num { color: var(--color-text-strong); }

/* Clearance for the sticky header (+ the series sub-nav on the series page). */
.pod-scene { --pod-scene-top: var(--header-h, 80px); }
.pod-scene--series { --pod-scene-top: calc(var(--header-h, 80px) + var(--series-subnav-h, var(--header-h-stuck, 57px))); }

/* Series page ≥1280px: the left index rail stays visible through the scene,
 * so the chapter mark and intro start to its right. */
@media (min-width: 1280px) {
	.pod-scene.pod-scene--series.is-live .pod-scene__chapter,
	.pod-scene.pod-scene--series.is-live .pod-scene__intro {
		left: clamp(11rem, 13vw, 14rem);
	}
}

/* The series "Modes" nav link lands on the modes beat inside the runway. */
.pod-scene__anchor {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.pod-scene.is-live .pod-scene__anchor {
	top: calc(var(--at, 0) * 100vh);
	top: calc(var(--at, 0) * 100svh);
}

/* ---------- Scene: static layout (default) ---------- */
.pod-scene {
	position: relative;
	background: var(--color-bg);
	color: var(--color-text);
}
.pod-scene__runway { position: relative; }
.pod-scene__stage {
	position: relative;
	display: grid;
	gap: var(--space-16);
	width: 100%;
	max-width: var(--container-xl);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block: var(--space-20);
	box-sizing: border-box;
}
.pod-scene__canvas,
.pod-scene__focus,
.pod-scene__chapter,
.pod-scene__ticks,
.pod-scene__graph { display: none; }

.pod-scene__heading,
.pod-scene__mheading {
	margin: var(--space-5) 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: 0;
	color: var(--color-text-strong);
	text-wrap: balance;
}
.pod-scene__lede {
	max-width: 36ch;
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.pod-scene__pod {
	position: relative;
	width: min(100%, 340px);
	margin: 0 auto;
}
.pod-scene__poster {
	display: block;
	width: 100%;
	height: auto;
}
.pod-scene__pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 1px solid rgba(233, 231, 226, 0.55);
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.6);
	font: var(--weight-medium) 10px/20px var(--font-body);
	text-align: center;
	color: var(--color-text-strong);
}

.pod-scene__controls {
	display: grid;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pod-scene__tag {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
}
.pod-scene__tag-num {
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.pod-scene__ctitle {
	margin: var(--space-3) 0 var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	letter-spacing: 0;
	color: var(--color-text-strong);
}
.pod-scene__cline {
	max-width: 40ch;
	margin: 0;
	line-height: var(--leading-loose);
	color: var(--color-text-muted);
}

.pod-scene__modelist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-8) var(--space-6);
	margin: var(--space-10) 0 0;
	padding: 0;
	list-style: none;
}
.pod-scene__mode {
	padding-top: var(--space-5);
	border-top: var(--border-thin);
}
.pod-scene__mode-index {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.pod-scene__mode-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--mode);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode) 18%, transparent);
}
.pod-scene__mode-name {
	margin: var(--space-3) 0 var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-3xl);
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-text-strong);
}
.pod-scene__mode-line {
	margin: 0 0 var(--space-2);
	line-height: var(--leading-normal);
	color: var(--color-text);
}
.pod-scene__mode-trait {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.pod-scene__mode-curve {
	display: block;
	width: 100%;
	max-width: 260px;
	margin-top: var(--space-4);
}

/* Graph strokes (static mini curves + live graph) */
.pod-scene__axis {
	fill: none;
	stroke: var(--color-border);
	stroke-width: 1;
}
.pod-scene__axis-label {
	fill: var(--color-text-muted);
	font: 11px var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pod-scene__stock {
	fill: none;
	stroke: rgba(233, 231, 226, 0.32);
	stroke-width: 1.25;
	stroke-dasharray: 4 5;
}
.pod-scene__curve {
	fill: none;
	stroke: var(--mode, var(--color-text));
	stroke-width: 2.25;
	stroke-linecap: round;
}

@media (min-width: 768px) {
	.pod-scene__stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-16);
	}
	.pod-scene__intro,
	.pod-scene__modes { grid-column: 1 / -1; }
}

/* ---------- Scene: live sticky stage ---------- */
.pod-scene.is-live .pod-scene__runway {
	height: var(--lab-runway, 900vh);
}
.pod-scene.is-live .pod-scene__stage {
	position: sticky;
	top: 0;
	display: block;
	max-width: none;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.pod-scene.is-live .pod-scene__canvas {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.pod-scene.is-live .pod-scene__pod { display: none; }

/* Precision focus frame (drawn by the engine around the physical control). */
.pod-scene.is-live .pod-scene__focus {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.pod-scene__reticle { opacity: 0; }
.pod-scene__reticle-frame {
	fill: none;
	stroke: rgba(233, 231, 226, 0.9);
	stroke-width: 1.25;
	stroke-linecap: square;
}

.pod-scene.is-live .pod-scene__chapter {
	display: block;
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	/* Same margin from the top as from the left (below the bars where the stage
	 * frames under them — phones and touch tablets). */
	top: calc(var(--pod-inset, var(--pod-scene-top)) + clamp(2rem, 6vw, 7rem));
	opacity: 0;
}

.pod-scene.is-live .pod-scene__intro {
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	top: 50%;
	width: min(27vw, 26rem);
	transform: translateY(-50%);
}
.pod-scene.is-live .pod-scene__heading {
	font-size: clamp(2.75rem, 4.4vw, 4.5rem);
}

/* Explanation column: one control at a time, fixed position, no leader lines. */
.pod-scene.is-live .pod-scene__explain {
	position: absolute;
	left: 60vw;
	top: 50%;
	width: min(27vw, 24rem);
	transform: translateY(-50%);
}
.pod-scene.is-live .pod-scene__controls { position: relative; }

/* Life with each control: an image card inside each control's copy block, so it
   sits right under its text and fades with it. The controls stack in one grid
   cell (not absolute), so the block is as tall as its tallest entry.
   Static layout keeps the plain list. (user, 2026-09-21) */
.pod-scene__shot { display: none; }
.pod-scene.is-live .pod-scene__controls { display: grid; min-height: 0; }
.pod-scene.is-live .pod-scene__shot {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: var(--space-5) 0 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: #0b0b0b;
}
.pod-scene__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pod-scene.is-live .pod-scene__control {
	grid-area: 1 / 1;   /* stacked in one cell; see the image-card note above */
	opacity: 0;
	will-change: transform, opacity;
}
.pod-scene.is-live .pod-scene__ctitle {
	font-size: clamp(2rem, 2.8vw, 2.75rem);
	line-height: 1.02;
}
.pod-scene.is-live .pod-scene__ticks {
	display: flex;
	gap: 6px;
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
	opacity: 0;
}
.pod-scene__tick {
	position: relative;
	width: 28px;
	height: 2px;
	background: rgba(233, 231, 226, 0.16);
	overflow: hidden;
}
.pod-scene__tick span {
	position: absolute;
	inset: 0;
	background: var(--color-text);
	transform: scaleX(var(--fill, 0));
	transform-origin: left center;
}
.pod-scene__tick.is-active span { background: var(--color-primary); }

/* Inside the pod. Static: a plain list. Live: a cloud of marks on the opened
 * layers, each label on a ring just outside the assembly. */
.pod-scene__parts {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}
.pod-scene__part-dot,
.pod-scene__part-line { display: none; }
.pod-scene__part-tag {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pod-scene__part-label {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-lg);
	letter-spacing: 0;
	color: var(--color-text-strong);
}
.pod-scene__part-sub {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.pod-scene.is-live .pod-scene__inside {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.pod-scene.is-live .pod-scene__inside-title { display: none; }
.pod-scene.is-live .pod-scene__parts {
	display: block;
	margin: 0;
}
.pod-scene.is-live .pod-scene__part {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	will-change: transform, opacity;
}
/* Red marks: a small core in a thin ring, a soft glow, a hairline that fades out. */
.pod-scene.is-live .pod-scene__part-dot {
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(255, 0, 18, 0.55), 0 0 18px rgba(255, 0, 18, 0.55);
}
.pod-scene.is-live .pod-scene__part-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--len, 0);
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 0, 18, 0.85), rgba(255, 0, 18, 0.12));
	transform: rotate(var(--ang, 0));
	transform-origin: 0 50%;
}
.pod-scene.is-live .pod-scene__part-tag {
	position: absolute;
	left: var(--lx, 0);
	top: var(--ly, 0);
	white-space: nowrap;
	transform: translate(12px, -50%);
}
.pod-scene.is-live .pod-scene__part.is-left .pod-scene__part-tag {
	align-items: flex-end;
	text-align: right;
	transform: translate(calc(-100% - 12px), -50%);
}

/* Five Modes column: alternates to the side opposite the pod. */
.pod-scene.is-live .pod-scene__modes {
	position: absolute;
	top: 50%;
	width: min(34vw, 30rem);
	opacity: 0;
	transform: translateY(-50%);
	will-change: transform, opacity;
}
/* Mirrored around the pod: the left block ends where the right block starts
 * (measured from the other edge) and is narrower, so its ragged-right text
 * sits as close to the pod as the right block does. */
.pod-scene.is-live .pod-scene__modes.is-right { left: 54vw; }
.pod-scene.is-live .pod-scene__modes.is-left {
	right: 54vw;
	width: min(28vw, 26rem);
}
/* Live: "08 · Five Modes" moves to the chapter mark position. */
.pod-scene.is-live .pod-scene__modes > .pod-scene__eyebrow { display: none; }
.pod-scene.is-live .pod-scene__mheading {
	margin: var(--space-4) 0 var(--space-5);
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
}
.pod-scene.is-live .pod-scene__graph {
	display: block;
	width: min(100%, 24rem, 38vh);
	height: auto;
	overflow: visible;
}
.pod-scene.is-live .pod-scene__graph .pod-scene__curve { stroke-width: 2.5; }
.pod-scene.is-live .pod-scene__modelist {
	position: relative;
	display: block;
	min-height: 9.5rem;
	margin-top: var(--space-5);
}
.pod-scene.is-live .pod-scene__mode {
	position: absolute;
	inset: 0 0 auto 0;
	padding: 0;
	border: 0;
	opacity: 0;
}
.pod-scene.is-live .pod-scene__mode-name {
	font-size: clamp(2.5rem, 4vw, 4rem);
}
.pod-scene.is-live .pod-scene__mode-line { max-width: 34ch; }
.pod-scene.is-live .pod-scene__mode-curve { display: none; }

/* Copy centres in the stage area below the sticky header (+ sub-nav). */
.pod-scene.is-live .pod-scene__intro,
.pod-scene.is-live .pod-scene__explain,
.pod-scene.is-live .pod-scene__modes { top: calc(50% + var(--pod-inset, 0px) / 2); }

/* ---------- Scene: compact live stage (phones, tablets < 1024px) ----------
 * Pod in the upper stage, one text block at a time in the lower stage. */
.pod-scene__part-caption { display: none; }

.pod-scene.is-live.is-compact .pod-scene__stage { height: 100svh; }
.pod-scene.is-live.is-compact .pod-scene__chapter {
	left: 20px;
	top: calc(var(--pod-inset, var(--pod-scene-top)) + clamp(1.25rem, 6vw, 1.75rem) + env(safe-area-inset-top, 0px));
}
.pod-scene.is-live.is-compact .pod-scene__intro,
.pod-scene.is-live.is-compact .pod-scene__explain,
.pod-scene.is-live.is-compact .pod-scene__modes {
	left: 20px;
	right: 20px;
	top: auto;
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	width: auto;
}
.pod-scene.is-live.is-compact .pod-scene__explain { transform: none; }
.pod-scene.is-live.is-compact .pod-scene__heading {
	margin: var(--space-3) 0;
	font-size: clamp(2rem, 9vw, 2.75rem);
}
.pod-scene.is-live.is-compact .pod-scene__lede {
	font-size: var(--text-base);
}
.pod-scene.is-live.is-compact .pod-scene__controls { min-height: 0; }
.pod-scene.is-live.is-compact .pod-scene__shot {
	/* Phones: a smaller card, not a full-width band — the pod stays the hero.
	   (user, 2026-09-21) */
	width: min(11.5rem, 100%);   /* same fixed card as the station scene */
	margin-top: var(--space-3);
}
.pod-scene.is-live.is-compact .pod-scene__ctitle { font-size: clamp(1.625rem, 7vw, 2rem); }
.pod-scene.is-live.is-compact .pod-scene__cline { font-size: var(--text-sm); }
.pod-scene.is-live.is-compact .pod-scene__ticks { margin-top: var(--space-4); }

.pod-scene.is-live.is-compact .pod-scene__mheading { display: none; }
.pod-scene.is-live.is-compact .pod-scene__graph {
	position: absolute;
	right: 0;
	/* Lifted clear of the mode copy — it was landing almost on the text on a
	   real phone. (user, 2026-09-16) */
	top: -0.875rem;
	width: min(36vw, 20vh);
}
.pod-scene.is-live.is-compact .pod-scene__graph .pod-scene__axis-label { display: none; }
.pod-scene.is-live.is-compact .pod-scene__modelist {
	min-height: 8.5rem;
	margin-top: var(--space-4);
	padding-right: calc(min(36vw, 20vh) + var(--space-4));
}
.pod-scene.is-live.is-compact .pod-scene__mode-name { font-size: clamp(2rem, 9vw, 2.5rem); }
.pod-scene.is-live.is-compact .pod-scene__mode-line { font-size: var(--text-sm); }

/* Inside the pod on a phone: numbered dots on the layers, one caption below. */
.pod-scene.is-live.is-compact .pod-scene__part-line,
.pod-scene.is-live.is-compact .pod-scene__part-tag { display: none; }
.pod-scene.is-live.is-compact .pod-scene__part-dot {
	transition: transform 0.25s ease;
}
.pod-scene.is-live.is-compact .pod-scene__part.is-active .pod-scene__part-dot {
	transform: scale(1.6);
}
.pod-scene.is-live.is-compact .pod-scene__part-caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	opacity: 0;
}
.pod-scene__part-caption-num {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wider);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.pod-scene__part-caption-label {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: clamp(1.75rem, 8vw, 2.25rem);
	letter-spacing: 0;
	color: var(--color-text-strong);
}
.pod-scene__part-caption-sub {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.pod-scene *,
	.pod-scene *::before { transition: none !important; }
}