.gw-risk {
	--risk-a: var(--text-strong);
	--risk-b: var(--accent-deep);

	min-width: 0;
	padding-block: var(--space-4) var(--space-7);
	color: inherit;
	line-height: var(--leading-body);
}

.gw-risk__section {
	margin-block-end: var(--space-8);
}

.gw-risk__section > h2 {
	margin: 0 0 var(--space-5);
}

.gw-risk__copy,
.gw-risk > .gw-prose {
	max-width: var(--measure-prose);
}

.gw-risk__heading {
	max-width: 26ch;
}

.gw-risk__controls,
.gw-risk__results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin-block: var(--space-5);
}

.gw-risk__panel {
	min-width: 0;
	padding: var(--space-4);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	background: var(--bg-canvas);
}

.gw-risk__panel-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
}

.gw-risk__panel p {
	max-width: var(--measure-prose);
	margin-block: var(--space-3);
}

.gw-risk__label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
}

.gw-risk__range {
	display: block;
	width: 100%;
	margin-block: var(--space-3);
	accent-color: var(--accent);
}

.gw-risk__range:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.gw-risk__metric {
	display: block;
	margin-block: var(--space-2);
	font-size: clamp(1.65rem, 4vw, 2.5rem);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
}

.gw-risk__muted {
	color: var(--text-body);
}

.gw-risk__bar {
	height: 0.7rem;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--bg-raised);
}

.gw-risk__fill {
	width: 0;
	height: 100%;
	background: var(--risk-a);
}

.gw-risk__fill--b {
	background: var(--risk-b);
}

.gw-risk__plot {
	display: block;
	width: 100%;
	max-width: 100%;
	height: clamp(280px, 36vw, 400px);
	margin-block: var(--space-5);
}

.gw-risk__line {
	stroke: var(--risk-a);
}

.gw-risk__line--b {
	stroke: var(--risk-b);
	stroke-dasharray: 8 4;
}

.gw-risk__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.gw-risk__dot {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: var(--space-2);
	background: var(--risk-a);
}

.gw-risk__dot--b {
	background: var(--risk-b);
}

.gw-risk__details {
	max-width: var(--measure-prose);
	padding-block: var(--space-4);
	border-block: 1px solid var(--border-hairline);
}

.gw-risk__details > summary {
	cursor: pointer;
	font-weight: var(--weight-semibold);
}

.gw-risk__details > summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.gw-risk__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin-block: var(--space-5);
	overflow-wrap: anywhere;
}

.gw-risk__table th,
.gw-risk__table td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--border-hairline);
	text-align: left;
}

.gw-risk__table caption {
	margin-block-end: var(--space-3);
	text-align: left;
	font-size: var(--text-sm);
}

.gw-risk__table td {
	font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
	.gw-risk__controls,
	.gw-risk__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gw-risk__zoom {
	margin-block: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
}

.gw-risk__zoom > summary {
	cursor: pointer;
	font-weight: var(--weight-semibold);
}

.gw-risk__zoom > summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.gw-risk__zoom[open] > summary {
	margin-bottom: var(--space-5);
}

.gw-risk__zoom .gw-risk__plot {
	min-width: 0;
}

.gw-risk__plot[hidden] {
	display: none;
}

.gw-risk__table--probabilities th:first-child {
	width: 60%;
}