html,
body {
	overflow-x: clip;
}

#jump-back-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

#jump-back-in-heading {
	min-width: 0;
	overflow-wrap: anywhere;
}

.jump-back-in-grid {
	grid-row: 2;
}

.jump-back-in-more {
	display: inline-flex;
	grid-row: 3;
	width: fit-content;
	min-width: 7rem;
	min-height: 2.75rem;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-attempt-md);
	margin-top: var(--space-attempt-lg);
	padding: var(--space-attempt-sm) var(--space-attempt-md);
	border: var(--rule-attempt-strong) solid var(--color-jump-border);
	border-radius: var(--radius-attempt-pill);
	background-color: var(--color-attempt-surface);
	color: var(--color-jump-ink);
	font-family: var(--font-attempt-body);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	transition: transform var(--dur-attempt-micro) var(--ease-attempt-out);
}

.jump-back-in-more-arrow {
	font-size: var(--text-attempt-lg);
	transition: transform var(--dur-attempt-micro) var(--ease-attempt-out);
}

.jump-back-in-more:focus-visible,
.attempts-back:focus-visible,
.attempt-filter:focus-visible,
.attempt-retry:focus-visible,
.attempt-action:focus-visible {
	outline: var(--rule-attempt-strong) solid var(--color-attempt-focus);
	outline-offset: var(--space-attempt-2xs);
}

.jump-back-in-more:active,
.attempts-back:active,
.attempt-action:active,
.attempt-filter:active,
.attempt-retry:active {
	transform: translateY(1px);
}

.jump-back-in-more[aria-disabled='true'],
.attempts-back[aria-disabled='true'],
.attempt-filter:disabled,
.attempt-retry:disabled,
.attempt-action[aria-disabled='true'] {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

.jump-back-in-more[aria-busy='true'],
.attempts-back[aria-busy='true'],
.attempt-filter[aria-busy='true'],
.attempt-retry[aria-busy='true'],
.attempt-action[aria-busy='true'] {
	cursor: progress;
	opacity: 0.7;
}

.jump-back-in-more[data-state='error'],
.attempts-back[data-state='error'],
.attempt-filter[data-state='error'],
.attempt-retry[data-state='error'],
.attempt-action[data-state='error'] {
	border-color: var(--color-attempt-error);
}

.jump-back-in-more[data-state='success'],
.attempts-back[data-state='success'],
.attempt-filter[data-state='success'],
.attempt-retry[data-state='success'],
.attempt-action[data-state='success'] {
	border-color: var(--color-attempt-success);
}

.attempts-back[data-state='error'] {
	color: var(--color-attempt-error);
}

.attempts-back[data-state='success'] {
	color: var(--color-attempt-success);
}

#attempts {
	--section-color: var(--color-attempt-primary);
	min-height: 100svh;
	box-sizing: border-box;
	padding: 0 0 calc(var(--space-attempt-3xl) + var(--space-attempt-xl));
	color: var(--color-attempt-ink);
	font-family: var(--font-attempt-body);
}

.attempts-header,
.attempt-timeline,
.attempts-state {
	width: 100%;
	max-width: 80rem;
	box-sizing: border-box;
	margin-inline: auto;
}

.attempts-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-attempt-lg);
	align-items: end;
	max-width: none;
	padding: var(--space-attempt-lg) clamp(var(--space-attempt-md), 4vw, var(--space-attempt-2xl));
	background-color: var(--color-attempt-header);
	border-block-end: var(--rule-attempt) solid var(--color-attempt-card-border);
	text-shadow: none;
	box-shadow: 0 var(--space-attempt-2xs) var(--space-attempt-lg) var(--color-attempt-card-shadow);
}

.attempts-header-copy {
	min-width: 0;
}

.attempts-back {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	color: var(--color-attempt-ink);
	font-weight: 700;
	text-underline-offset: var(--space-attempt-2xs);
	white-space: nowrap;
	transition: transform var(--dur-attempt-micro) var(--ease-attempt-out);
}

.attempts-header h1 {
	min-width: 0;
	margin: var(--space-attempt-lg) 0 var(--space-attempt-xs);
	font-family: var(--font-attempt-body);
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 0.98;
	overflow-wrap: anywhere;
}

.attempts-header p {
	margin: 0;
	color: var(--color-attempt-ink);
	font-size: var(--text-attempt-body);
	line-height: 1.55;
}

.attempt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-attempt-xs);
}

.attempt-filter,
.attempt-retry {
	min-height: 2.75rem;
	padding: var(--space-attempt-sm) var(--space-attempt-md);
	border: var(--rule-attempt-strong) solid var(--color-attempt-ink);
	border-radius: var(--radius-attempt-pill);
	background-color: color-mix(in oklch, var(--section-color) 35%, var(--color-attempt-surface));
	color: var(--color-attempt-ink);
	font-family: var(--font-attempt-body);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--dur-attempt-micro) var(--ease-attempt-out);
}

.attempt-filter {
	border-color: var(--color-jump-border);
	background-color: var(--color-attempt-surface);
	color: var(--color-jump-ink);
}

.attempt-filter[aria-pressed='true'] {
	border-color: var(--color-attempt-ink);
	background-color: var(--color-attempt-ink);
	color: var(--color-attempt-paper);
}

.attempts-state {
	display: grid;
	justify-items: start;
	gap: var(--space-attempt-sm);
	padding-block: var(--space-attempt-2xl);
	padding-inline: clamp(var(--space-attempt-md), 4vw, var(--space-attempt-2xl));
}

.attempts-state h2,
.attempts-state p {
	margin: 0;
}

.attempts-state--error {
	border-block-start: var(--rule-attempt-strong) solid var(--color-attempt-error);
}

.attempts-loader {
	width: 1.75rem;
	height: 1.75rem;
	border: var(--rule-attempt-strong) solid var(--color-attempt-rule);
	border-block-start-color: var(--color-attempt-secondary);
	border-radius: var(--radius-attempt-pill);
	animation: attempts-loader var(--dur-attempt-long) linear infinite;
}

@keyframes attempts-loader {
	to { transform: rotate(1turn); }
}

.attempt-action {
	color: inherit;
	text-decoration: none;
	text-shadow: none;
	transition: transform var(--dur-attempt-short) var(--ease-attempt-out);
}

.attempt-status {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: var(--space-attempt-xs);
	font-size: var(--text-attempt-sm);
	font-weight: 700;
	white-space: nowrap;
}

.attempt-status::before {
	width: 0.55rem;
	height: 0.55rem;
	border: var(--rule-attempt) solid currentcolor;
	border-radius: var(--radius-attempt-pill);
	background-color: transparent;
	content: '';
}

.is-active .attempt-status::before {
	background-color: var(--color-attempt-primary);
}

.is-finished .attempt-status::before {
	background-color: var(--color-attempt-success);
}

/* Attempts timeline */
.attempt-timeline {
	display: grid;
	gap: var(--space-attempt-2xl);
	padding: var(--space-attempt-xl) clamp(var(--space-attempt-md), 4vw, var(--space-attempt-2xl)) 0;
}

.attempt-timeline-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-attempt-md);
}

.attempt-timeline-group > h2 {
	align-self: start;
	width: fit-content;
	margin: 0;
	padding: 0;
	color: var(--color-attempt-ink);
	font-family: var(--font-attempt-body);
	font-size: var(--text-attempt-xl);
	font-style: normal;
	line-height: 1.1;
}

.attempt-timeline-rows {
	display: grid;
	gap: var(--space-attempt-md);
}

.attempt-timeline-row {
	display: grid;
	min-width: 0;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-attempt-md);
	align-items: start;
	padding: var(--space-attempt-lg);
	border: var(--rule-attempt) solid var(--color-attempt-card-border);
	border-radius: var(--radius-attempt-card);
	background-color: var(--color-attempt-card);
	box-shadow:
		inset 0 var(--rule-attempt) 0 var(--color-attempt-card-highlight),
		0 var(--space-attempt-xs) var(--space-attempt-lg) var(--color-attempt-card-shadow);
}

.attempt-timeline-marker {
	width: 1rem;
	height: 1rem;
	margin-block-start: var(--space-attempt-2xs);
	border: var(--rule-attempt-strong) solid var(--color-attempt-card);
	border-radius: var(--radius-attempt-pill);
	background-color: var(--section-color, var(--color-attempt-secondary));
	box-shadow: 0 0 0 var(--rule-attempt) var(--color-attempt-rule);
}

.attempt-timeline-copy {
	min-width: 0;
}

.attempt-timeline-copy time,
.attempt-timeline-copy p,
.attempt-timeline-score span {
	color: var(--color-attempt-muted);
	font-size: var(--text-attempt-sm);
}

.attempt-timeline-copy h3,
.attempt-timeline-copy p {
	margin: var(--space-attempt-xs) 0 0;
}

.attempt-timeline-copy h3 {
	min-width: 0;
	font-family: var(--font-attempt-body);
	font-size: var(--text-attempt-lg);
	font-style: normal;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.attempt-timeline-score,
.attempt-timeline-action {
	grid-column: 2;
}

.attempt-timeline-score {
	display: flex;
	align-items: baseline;
	gap: var(--space-attempt-xs);
}

.attempt-timeline-score strong {
	font-size: var(--text-attempt-lg);
	font-variant-numeric: tabular-nums;
}

.attempt-timeline-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-attempt-xs);
	font-weight: 700;
	white-space: nowrap;
}

@media (min-width: 40rem) {
	.attempts-header {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.attempt-timeline-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
	}

	.attempt-timeline-score,
	.attempt-timeline-action {
		grid-column: 3;
		justify-content: flex-end;
	}

	.attempt-timeline-score {
		grid-row: 1;
	}

	.attempt-timeline-action {
		grid-row: 2;
	}

}

@media (min-width: 48rem) {
	#jump-back-in {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--space-attempt-lg);
	}

	#jump-back-in-heading,
	.jump-back-in-more {
		grid-row: 1;
	}

	.jump-back-in-more {
		grid-column: 2;
		margin-top: 0;
	}

	.jump-back-in-grid {
		grid-column: 1 / -1;
	}
}

@media (min-width: 60rem) {
	.attempt-timeline-group {
		grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr);
	}
}

@media (hover: hover) and (pointer: fine) {
	.jump-back-in-more:hover .jump-back-in-more-arrow {
		transform: translateX(var(--space-attempt-2xs));
	}

	.attempt-filter:hover,
	.attempt-retry:hover {
		transform: translateY(-1px);
	}

	.attempts-back:hover {
		transform: translateX(calc(-1 * var(--space-attempt-2xs)));
	}

	.attempt-action:hover {
		transform: translateY(-2px);
	}
}

@media (pointer: coarse) {
	.jump-back-in-more,
	.attempt-filter,
	.attempt-retry {
		min-height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 150ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 150ms !important;
	}

	.attempt-action,
	.jump-back-in-more,
	.jump-back-in-more-arrow,
	.attempt-filter,
	.attempt-retry {
		transform: none !important;
	}
}