/*
 * Seal anatomy stage (AnatomyStage.dc.html). Phones and tablets: drawing, caption below, number-only step
 * buttons, full-width Play. From 1024 px: framed drawing with zone ticks and title block, the caption
 * over the drawing from 1280 px, named step buttons, the step's text in columns.
 */

.isl-stage {
	--stage-rule: var(--dark-line);
	--stage-tick: var(--wp--custom--drawing--tick);
	padding-block: var(--isl-section);
	color: var(--on-dark);
}

.isl-stage__inner,
.isl-step,
.isl-step__static,
.isl-step__list,
.isl-stage__view {
	display: flex;
	flex-direction: column;
	gap: var(--s24);
}

/* ---------- Head ---------- */

.isl-stage__head,
.isl-stage__titles,
.isl-stage__introbox {
	display: flex;
	flex-direction: column;
	gap: var(--s12);
}

.isl-stage .isl-eyebrow {
	color: var(--on-dark-muted);
}

.isl-stage__heading,
.isl-stage__title {
	color: var(--surface);
}

/* On /anatomy/ the stage carries the page H1 (AnatomyStage hlevel h1: 40 → 56, 1.05). */
h1.isl-stage__heading {
	font-size: var(--wp--preset--font-size--heading-1-band);
	line-height: var(--wp--custom--line-height--heading-1-band);
	font-stretch: var(--wp--custom--font-stretch--heading-2);
}

.isl-stage__intro,
.isl-stage__body {
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--body);
}

/* Play / Stop: outline on ink. */
.isl-stage__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--min);
	padding: 0 calc(var(--s16) + var(--s4));
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	box-shadow: inset 0 0 0 var(--wp--custom--border--outline-button) var(--surface);
	color: var(--surface);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.2;
	transition: background-color var(--t-fast) var(--ease);
}

.isl-stage__play:hover {
	background: var(--ink-2);
}

.isl-stage__i-stop,
.isl-stage__play.is-playing .isl-stage__i-play {
	display: none;
}

.isl-stage__play.is-playing .isl-stage__i-stop {
	display: inline;
}

.isl-stage__play--wide {
	display: none;
}

/* ---------- Drawing frame ---------- */

.isl-stage__figure {
	position: relative;
}

.isl-frame {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--stage-rule);
	border-radius: var(--r-panel);
	overflow: hidden;
	background-image:
		linear-gradient(to right, var(--stage-rule) 1px, transparent 1px),
		linear-gradient(to bottom, var(--stage-rule) 1px, transparent 1px);
	background-size: var(--wp--custom--drawing--cell-mobile) var(--wp--custom--drawing--cell-mobile);
	background-position: 0 var(--stage-tick);
}

.isl-frame__top,
.isl-frame__bottom,
.isl-frame__side {
	position: relative;
	background: var(--ink);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono-sm);
	line-height: var(--stage-tick);
	color: var(--on-dark-muted);
	text-align: center;
}

.isl-frame__top {
	border-bottom: 1px solid var(--stage-rule);
}

.isl-frame__bottom {
	border-top: 1px solid var(--stage-rule);
}

.isl-frame__ticks {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

.isl-frame__ticks--4 > span + span {
	border-left: 1px solid var(--stage-rule);
}

.isl-frame__ticks--6,
.isl-frame__side,
.isl-frame__tb {
	display: none;
}

.isl-frame__dwg {
	display: flex;
	justify-content: space-between;
	padding: 0 var(--s12);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
}

.isl-frame__draw {
	position: relative;
}

/* ---------- Caption ---------- */

.isl-stage__card {
	display: flex;
	flex-direction: column;
	gap: var(--s8);
}

.isl-stage__num {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono);
	line-height: var(--wp--custom--line-height--mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--orange);
}

.isl-stage__title {
	font-size: var(--fs-h2);
	line-height: var(--wp--custom--line-height--heading-2-mobile);
	font-weight: 800;
	font-stretch: var(--wp--custom--font-stretch--heading-2);
}

/* ---------- Step buttons ---------- */

.isl-stage__nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s8);
}

.isl-stage__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s4);
	min-height: var(--wp--custom--touch--min);
	padding: 0;
	border: 0;
	border-top: var(--wp--custom--border--selected) solid var(--stage-rule);
	background: transparent;
	color: var(--on-dark);
	text-align: left;
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.isl-stage__stepn {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--mono);
	letter-spacing: var(--tracking-mono);
	color: var(--on-dark-muted);
}

.isl-stage__stepname {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.isl-stage__step:hover {
	color: var(--surface);
}

.isl-stage__step[aria-pressed="true"] {
	border-top-color: var(--orange);
	color: var(--surface);
}

.isl-stage__step[aria-pressed="true"] .isl-stage__stepn {
	color: var(--orange);
}

/* ---------- The step's text ---------- */

.isl-stage__steps {
	display: flex;
	flex-direction: column;
	gap: var(--s48);
}

/* With JS, only the current step's text shows; the static drawings sit in noscript. */
.js .isl-stage[data-step="1"] .isl-step:not([data-n="1"]),
.js .isl-stage[data-step="2"] .isl-step:not([data-n="2"]),
.js .isl-stage[data-step="3"] .isl-step:not([data-n="3"]),
.js .isl-stage[data-step="4"] .isl-step:not([data-n="4"]),
.js .isl-stage[data-step="5"] .isl-step:not([data-n="5"]) {
	display: none;
}

.isl-key,
.isl-cols,
.isl-specs3 {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-small);
	line-height: var(--wp--custom--line-height--small);
}

.isl-key > li,
.isl-cols > li,
.isl-specs3 > div {
	display: flex;
	gap: var(--s12);
	padding: var(--s12) 0;
	border-top: 1px solid var(--stage-rule);
}

.isl-key > li:last-child {
	border-bottom: 1px solid var(--stage-rule);
}

/* Phones: "Hatched means cut. The top half is sliced down the middle." on one line of text. */
.isl-key svg {
	display: none;
}

.isl-key :is(h3, h4),
.isl-key p {
	display: inline;
	font-size: inherit;
	line-height: inherit;
}

.isl-key :is(h3, h4) {
	font-weight: 700;
	color: var(--surface);
}

.isl-key__cut {
	fill: url(#xs-h45-d);
	stroke: var(--on-dark);
	stroke-width: 1.25;
}

.isl-key__pump {
	fill: none;
	stroke: var(--on-dark-muted);
	stroke-width: 1.25;
	stroke-dasharray: 14 4 3 4;
}

.isl-key__solid {
	fill: var(--ink);
	stroke: var(--on-dark);
	stroke-width: 1.25;
}

.isl-key__hair {
	fill: none;
	stroke: var(--muted);
	stroke-width: 0.8;
}

.isl-balloon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: var(--s24);
	height: var(--s24);
	border: 1px solid var(--surface);
	border-radius: var(--r-pill);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--fs-mono-sm);
	line-height: 1;
	color: var(--surface);
}

.isl-cols > li > div {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}

.isl-cols :is(h3, h4) {
	font-size: var(--fs-body);
	line-height: 1.4;
	font-weight: 700;
	color: var(--surface);
}

.isl-cols a,
.isl-stage__photo,
.isl-stage__more a {
	color: var(--surface);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.isl-cols a:hover,
.isl-stage__photo:hover,
.isl-stage__more a:hover {
	color: var(--orange);
}

.isl-fitted,
.isl-stopbar {
	display: none;
}

.isl-specs3 > div {
	justify-content: space-between;
	gap: var(--s16);
}

.isl-specs3 dd {
	margin: 0;
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--surface);
}

.isl-stage__cta {
	display: flex;
	flex-direction: column;
	gap: var(--s24);
}

.isl-stage__finder {
	display: flex;
	width: 100%;
	min-height: var(--wp--custom--touch--button-mobile-primary);
	padding: 0 var(--s24);
	background: var(--surface);
	color: var(--ink);
}

.isl-stage__finder:hover {
	color: var(--ink);
}

.isl-stage__photo {
	align-self: center;
	font-size: var(--fs-body);
}

.isl-stage__more {
	padding-top: var(--s12);
	border-top: 1px solid var(--stage-rule);
}

.isl-stage__more a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s8);
	min-height: var(--wp--custom--touch--min);
	font-size: var(--fs-body);
	line-height: var(--wp--custom--line-height--ui);
}

/* ---------- From 1024 px: the framed drawing and columns ---------- */

@media (min-width: 1024px) {
	.isl-stage__inner {
		gap: var(--s32);
	}

	.isl-stage__head {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--s24);
		align-items: end;
	}

	.isl-stage__titles {
		grid-column: span 7;
	}

	.isl-stage__introbox {
		grid-column: span 5;
		align-items: flex-start;
		gap: var(--s16);
	}

	.isl-stage__play--wide {
		display: inline-flex;
	}

	.isl-stage__play--narrow {
		display: none;
	}

	.isl-frame {
		grid-template-columns: var(--stage-tick) minmax(0, 1fr) var(--stage-tick);
		grid-template-rows: var(--stage-tick) auto var(--stage-tick);
		background-size: var(--wp--custom--drawing--cell) var(--wp--custom--drawing--cell);
		background-position: var(--stage-tick) var(--stage-tick);
	}

	/* The zone strips sit in 24 px rows; their 1 px rule is inside the row, as on the drawing sheet. */
	.isl-frame__top,
	.isl-frame__bottom {
		grid-column: 1 / -1;
		height: var(--stage-tick);
		line-height: calc(var(--stage-tick) - 1px);
	}

	.isl-frame__ticks--6 {
		display: grid;
		grid-template-columns: var(--stage-tick) repeat(6, minmax(0, 1fr)) var(--stage-tick);
		grid-auto-flow: row;
	}

	.isl-frame__ticks--6 > span:nth-child(n + 3):nth-child(-n + 7) {
		border-left: 1px solid var(--stage-rule);
	}

	.isl-frame__ticks--4,
	.isl-frame__dwg {
		display: none;
	}

	.isl-frame__side {
		display: grid;
		grid-template-rows: repeat(3, minmax(0, 1fr));
	}

	.isl-frame__side > span {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.isl-frame__side > span + span {
		border-top: 1px solid var(--stage-rule);
	}

	.isl-frame__side--l {
		border-right: 1px solid var(--stage-rule);
	}

	.isl-frame__side--r {
		border-left: 1px solid var(--stage-rule);
	}

	.isl-frame__tb {
		position: absolute;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(4, auto);
		background: var(--ink);
		border-top: 1px solid var(--stage-rule);
		border-left: 1px solid var(--stage-rule);
		font-family: var(--font-mono);
		font-weight: 500;
		font-size: var(--fs-mono-sm);
		line-height: var(--wp--custom--line-height--mono);
		letter-spacing: var(--tracking-mono);
		text-transform: uppercase;
		text-align: left;
	}

	.isl-frame__tb > div {
		padding: var(--s8) var(--s12);
	}

	.isl-frame__tb > div + div {
		border-left: 1px solid var(--stage-rule);
	}

	.isl-frame__tb dt {
		color: var(--on-dark-muted);
	}

	.isl-frame__tb dd {
		margin: 0;
		color: var(--surface);
	}

	.isl-stage__card {
		gap: var(--s12);
	}

	.isl-stage__title {
		line-height: var(--wp--custom--line-height--heading-2);
	}

	/* Step buttons with names. */
	.isl-stage__nav {
		gap: var(--s24);
	}

	.isl-stage__step {
		align-items: flex-start;
		justify-content: flex-start;
		min-height: var(--s64);
		padding: var(--s12) 0 0;
	}

	.isl-stage__stepn {
		font-size: var(--fs-mono);
	}

	.isl-stage__stepname {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		font-size: var(--fs-body);
		line-height: 1.4;
		font-weight: 700;
	}

	/* Room for the tallest step's text, so the band doesn't jump between steps. */
	.js .isl-stage__steps {
		min-height: var(--wp--custom--drawing--text-min);
	}

	.isl-step,
	.isl-step__list {
		gap: var(--s32);
	}

	.isl-key,
	.isl-cols,
	.isl-specs3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s24);
	}

	.isl-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.isl-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.isl-key > li,
	.isl-cols > li,
	.isl-specs3 > div {
		padding: var(--s16) 0 0;
	}

	.isl-key > li {
		gap: var(--s16);
	}

	.isl-key > li:last-child {
		border-bottom: 0;
	}

	.isl-key svg {
		display: block;
		width: var(--s48);
		height: var(--s32);
	}

	.isl-key > li > div {
		display: flex;
		flex-direction: column;
		gap: var(--s4);
	}

	.isl-key :is(h3, h4) {
		display: block;
		font-size: var(--fs-body);
		line-height: 1.4;
	}

	.isl-key p {
		display: block;
	}

	.isl-cols > li {
		flex-direction: column;
		gap: var(--s8);
	}

	.isl-cols > li > div {
		gap: var(--s8);
	}

	.isl-cols--order .isl-balloon {
		display: none;
	}

	.isl-fitted {
		display: block;
		font-size: var(--fs-mono-sm);
		color: var(--on-dark-muted);
	}

	.isl-cols--4 p {
		display: flex;
		align-items: center;
		gap: var(--s8);
	}

	.isl-stopbar {
		display: block;
		flex-shrink: 0;
		width: var(--s12);
		height: 3px;
		background: var(--orange);
	}

	.isl-specs3 > div {
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--s8);
	}

	.isl-specs3 dt {
		font-family: var(--font-mono);
		font-weight: 500;
		font-size: var(--fs-mono-sm);
		line-height: var(--wp--custom--line-height--mono);
		letter-spacing: var(--tracking-mono);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	.isl-specs3 dd {
		font-size: var(--fs-h3);
		line-height: var(--wp--custom--line-height--heading-3);
	}

	.isl-stage__cta {
		flex-direction: row;
		align-items: center;
	}

	.isl-stage__finder {
		display: inline-flex;
		width: auto;
		min-height: var(--wp--custom--touch--button);
	}

	.isl-stage__more {
		padding-top: var(--s24);
	}

	.isl-stage__more a {
		display: inline-flex;
		justify-content: flex-start;
		min-height: 0;
	}
}

/* From 1280 px the caption sits over the drawing's empty top-left corner, and Find the seal goes orange. */
@media (min-width: 1280px) {
	.isl-stage__view {
		position: relative;
		display: block;
	}

	.isl-stage__view > .isl-stage__card {
		position: absolute;
		top: calc(var(--stage-tick) + var(--s24) + 1px);
		left: calc(var(--stage-tick) + var(--s24) + 1px);
		width: var(--wp--custom--drawing--card);
		pointer-events: none;
	}

	.isl-stage__finder {
		background: var(--orange);
	}

	.isl-stage__finder:hover {
		background: var(--orange-hover);
	}
}

@media print {
	.isl-stage__nav,
	.isl-stage__play {
		display: none !important;
	}
}