/*
 * The worked example exhibit.
 *
 * One product claim, LBL-1042, appears on seven public pages. Before this
 * component each page wrapped it in its own markup — .record, .result-record,
 * .information-record, .object-trace, .trace — and each restated the setup in
 * its own lede. Nothing told the reader it was the same claim, so a second or
 * third encounter read as repetition rather than as another stage of one story.
 *
 * The fix is recognition plus position. Every appearance now carries the same
 * masthead, so the reader learns the signature; the same six-stage strip, with
 * this page's stage lit, so the reader can see where they are in the trace; and
 * one line saying what this page adds. The page's own content is untouched
 * inside .we-body — the per-page material is the good part and stays.
 *
 * Loaded on every public-core page from runcible-public-core.php so the exhibit
 * is byte-identical everywhere. Do not copy these rules into the per-page
 * stylesheets; divergence there is what created the problem.
 */

.worked-example {
	--we-ground: var(--white, #fffdf7);
	--we-frame: var(--ink, #111312);
	--we-mast: var(--teal-dark, #173d42);
	--we-accent: var(--gold, #d3a43b);
	--we-quiet: var(--muted, #555b57);

	margin: clamp(40px, 5vw, 62px) 0 0;
	border: 2px solid var(--we-frame);
	color: var(--ink, #111312);
	background: var(--we-ground);
	box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

/* Masthead — identical on every page. This is the recognition signature. */
.worked-example .we-mast {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 13px clamp(16px, 2.2vw, 26px);
	color: #fffdf7;
	background: var(--we-mast);
	font: 600 .62rem/1.3 var(--mono, "IBM Plex Mono", monospace);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.worked-example .we-badge {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	color: var(--we-accent);
}

.worked-example .we-badge::before {
	content: "";
	width: .62em;
	height: .62em;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.worked-example .we-id {
	color: #cfe0e0;
}

/* Why this example is on this page. The one line that differs per page. */
.worked-example .we-why {
	margin: 0;
	padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.2vw, 26px);
	border-bottom: 1px solid rgba(17, 19, 18, .16);
	background: var(--paper, #f1ebde);
	font: 600 clamp(1.02rem, 1.5vw, 1.22rem)/1.45 var(--slab, "Roboto Slab", Georgia, serif);
}

.worked-example .we-why b {
	color: var(--red, #b23830);
	font-weight: 700;
}

/* The six stages of the trace, with this page's position lit.
   This is what turns a repeated example into a visible progression. */
.worked-example .we-stages {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(17, 19, 18, .16);
	background: var(--paper-2, #e3d9c8);
	counter-reset: we-stage;
}

.worked-example .we-stages li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 12px clamp(8px, 1vw, 14px);
	border-right: 1px solid rgba(17, 19, 18, .14);
	color: rgba(17, 19, 18, .42);
	font: 600 .58rem/1.28 var(--mono, "IBM Plex Mono", monospace);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.worked-example .we-stages li:last-child {
	border-right: 0;
}

.worked-example .we-stages li::before {
	counter-increment: we-stage;
	content: "0" counter(we-stage);
	font-size: .92em;
	opacity: .75;
}

/* Stages already passed on the way to this page. */
.worked-example .we-stages .is-done {
	color: rgba(17, 19, 18, .72);
}

/* Where this page sits. */
.worked-example .we-stages .is-here {
	color: #fffdf7;
	background: var(--we-mast);
	box-shadow: inset 0 -4px 0 var(--we-accent);
}

.worked-example .we-stages .is-here::before {
	color: var(--we-accent);
	opacity: 1;
}

.worked-example .we-body {
	padding: clamp(20px, 3vw, 34px) clamp(16px, 2.6vw, 30px);
}

/* The page's own claim line and record sit here unchanged, but the exhibit
   supplies the ground, so any dark-section styling has to be neutralised. */
.worked-example .we-body > .claim {
	margin: 0 0 clamp(18px, 2.4vw, 28px);
	color: var(--ink, #111312);
	font: 700 clamp(1.5rem, 2.7vw, 2.6rem)/1.14 var(--slab, "Roboto Slab", Georgia, serif);
}

.worked-example .we-body > .record,
.worked-example .we-body > .result-record,
.worked-example .we-body > .information-record {
	margin-top: 0;
	box-shadow: none;
}

/* The masthead above is a label and is sized like one. This is not: it carries
   a sentence and the exhibit's only call to action, so it takes reading type
   and a real button rather than caption-sized mono and an underlined link. */
.worked-example .we-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	padding: 20px clamp(16px, 2.2vw, 26px);
	border-top: 1px solid rgba(17, 19, 18, .16);
	background: var(--paper, #f1ebde);
}

.worked-example .we-foot > span {
	max-width: 44ch;
	color: var(--ink, #111312);
	font: 600 clamp(1rem, 1.3vw, 1.14rem)/1.45 var(--slab, "Roboto Slab", Georgia, serif);
}

.worked-example .we-foot a {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 50px;
	padding: 13px 22px;
	border: 1px solid var(--we-mast);
	color: #fffdf7;
	background: var(--we-mast);
	font: 600 0.78rem/1.2 var(--mono, "IBM Plex Mono", monospace);
	letter-spacing: 0.07em;
	text-decoration: none;
	text-transform: uppercase;
}

.worked-example .we-foot a:hover {
	border-color: var(--ink, #111312);
	background: var(--ink, #111312);
}

@media (max-width: 900px) {
	.worked-example .we-stages {
		grid-template-columns: repeat(3, 1fr);
	}

	.worked-example .we-stages li:nth-child(3n) {
		border-right: 0;
	}

	.worked-example .we-stages li:nth-child(-n+3) {
		border-bottom: 1px solid rgba(17, 19, 18, .14);
	}
}

@media (max-width: 560px) {
	.worked-example .we-stages {
		grid-template-columns: repeat(2, 1fr);
	}

	.worked-example .we-stages li:nth-child(3n) {
		border-right: 1px solid rgba(17, 19, 18, .14);
	}

	.worked-example .we-stages li:nth-child(2n) {
		border-right: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.worked-example {
		scroll-margin-top: 96px;
	}
}