/**
 * Base layout for a detached experiment page.
 *
 * Structure only, in a neutral palette. A client skin in
 * assets/css/experiments/{slug}.css redefines the tokens to take it over.
 */

:root {
	--x-ground: #ffffff;
	--x-surface: #f6f6f7;
	--x-ink: #1a1c1e;
	--x-muted: #5d6266;
	--x-line: #dcdee0;
	--x-accent: #1a1c1e;
	--x-on-accent: #ffffff;

	--x-pending: #8a9096;
	--x-running: #b06f16;
	--x-passed: #17784a;
	--x-failed: #b3261e;
	--x-blocked: #6c4bb6;

	--x-font: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--x-radius: 6px;
	--x-shell: 940px;
	--x-gutter: 24px;
}

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

:where(body, h1, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}

:where(ul, ol) {
	list-style: none;
}

body.x-body {
	min-height: 100svh;
	background: var(--x-ground);
	color: var(--x-ink);
	font-family: var(--x-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.x-shell {
	width: 100%;
	max-width: var(--x-shell);
	margin-inline: auto;
	padding-inline: var(--x-gutter);
}

/* -------------------------------------------------------------- masthead */

.x-masthead {
	padding-block: 40px 36px;
	background: var(--x-accent);
	color: var(--x-on-accent);
}

.x-back {
	display: inline-block;
	margin-bottom: 14px;
	color: inherit;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: .75;
}

.x-back::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 1px;
	margin-right: 8px;
	vertical-align: middle;
	background: currentColor;
}

.x-back:hover,
.x-back:focus-visible {
	opacity: 1;
}

.x-title {
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.08;
	letter-spacing: -.015em;
	font-weight: 600;
}

.x-lede {
	max-width: 62ch;
	margin-top: 12px;
	opacity: .85;
}

.x-lede p + p {
	margin-top: .6em;
}

/* ----------------------------------------------------------- environment */

.x-env {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 20px;
}

.x-env__switch {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
}

.x-env__tab {
	padding: 5px 14px;
	border-radius: 999px;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	opacity: .8;
}

.x-env__tab:hover,
.x-env__tab:focus-visible {
	opacity: 1;
}

.x-env__tab.is-current {
	background: var(--x-on-accent);
	color: var(--x-accent);
	opacity: 1;
}

.x-env__base {
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	opacity: .7;
	word-break: break-all;
}

/* ----------------------------------------------------------------- tally */

.x-main {
	padding-block: 32px 72px;
}

.x-tally {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.x-tally__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	background: var(--x-surface);
}

.x-tally__n {
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.x-tally__label {
	font-size: 13px;
	color: var(--x-muted);
}

/* ----------------------------------------------------------------- tests */

.x-tests {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.x-test__box {
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	background: var(--x-surface);
	overflow: hidden;
}

.x-test__summary {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
}

.x-test__summary::-webkit-details-marker {
	display: none;
}

/* The native marker is suppressed above, so the row needs its own sign that
   it opens. Without this a collapsed test reads as a dead row. */
.x-test__summary::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .45;
	transition: transform .2s ease, opacity .2s ease;
}

.x-test__summary:hover::after {
	opacity: .9;
}

.x-test__box[open] .x-test__summary::after {
	transform: translateY(2px) rotate(-135deg);
	opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
	.x-test__summary::after {
		transition: none;
	}
}

.x-test__summary:focus-visible {
	outline: 2px solid var(--x-accent);
	outline-offset: -2px;
}

.x-test__n {
	min-width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--x-ground);
	border: 1px solid var(--x-line);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--x-muted);
}

.x-test__name {
	font-weight: 600;
}

.x-test__count {
	font-size: 13px;
	color: var(--x-muted);
	white-space: nowrap;
}

.x-test__body {
	padding: 4px 18px 20px;
	border-top: 1px solid var(--x-line);
}

.x-test__empty,
.x-test__stamp {
	margin-top: 14px;
	font-size: 13px;
	color: var(--x-muted);
}

.x-test__error {
	margin-top: 14px;
	padding: 10px 12px;
	border-left: 3px solid var(--x-failed);
	background: var(--x-ground);
	font-size: 14px;
}

/* ----------------------------------------------------------------- steps */

.x-steps {
	counter-reset: x-step;
	margin-top: 16px;
}

.x-step {
	counter-increment: x-step;
	position: relative;
	padding: 9px 0 9px 40px;
	border-top: 1px solid var(--x-line);
	font-size: 15px;
}

.x-step:first-child {
	border-top: 0;
}

.x-step::before {
	content: counter(x-step);
	position: absolute;
	left: 0;
	top: 9px;
	width: 26px;
	text-align: right;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--x-muted);
}

/* A status marker only appears once a step has actually been run. */
.x-step[data-status]:not([data-status="pending"])::after {
	content: '';
	position: absolute;
	left: 31px;
	top: 17px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--x-pending);
}

.x-step[data-status="running"]::after { background: var(--x-running); }
.x-step[data-status="passed"]::after { background: var(--x-passed); }
.x-step[data-status="failed"]::after { background: var(--x-failed); }
.x-step[data-status="blocked"]::after { background: var(--x-blocked); }

.x-step__note {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--x-muted);
}

/* ---------------------------------------------------------------- badges */

.x-badge {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
	color: var(--x-on-accent);
	background: var(--x-pending);
}

.x-badge--running { background: var(--x-running); }
.x-badge--passed { background: var(--x-passed); }
.x-badge--failed { background: var(--x-failed); }
.x-badge--blocked { background: var(--x-blocked); }

.x-empty {
	padding: 40px 0;
	color: var(--x-muted);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
	.x-test__summary {
		grid-template-columns: auto 1fr auto;
		row-gap: 8px;
	}

	.x-test__name {
		grid-column: 2;
	}

	.x-badge,
	.x-test__count {
		grid-column: 2;
		justify-self: start;
	}

	.x-test__summary::after {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
	}
}