/* ==========================================================================
   Contingent Scenarios - scenario picker (CSS-only tabs)
   ========================================================================== */

.contingent-scenarios {
	--cx-blue: #1f4bff;
	--cx-blue-soft: #e7edff;
	--cx-orange: #b74a1f;
	--cx-orange-soft: #fdece2;
	--cx-ink: #0b1220;
	--cx-muted: #6b7280;
	--cx-border: #e5e7eb;
	--cx-bg: #ffffff;
	--cx-head-bg: #eef1f8;
	--cx-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	background: var(--cx-bg);
	border: 1px solid var(--cx-border);
	border-radius: 12px;
	overflow: hidden;
	color: var(--cx-ink);
	max-width: 1080px;
	margin: 32px auto;
	font-family: inherit;
}

/* Header */
.contingent-scenarios .cx-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	background: var(--cx-head-bg);
}
.contingent-scenarios .cx-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--cx-ink);
	background: transparent;
	padding: 0;
}
.contingent-scenarios .cx-subtitle {
	font-family: var(--cx-mono);
	font-size: 12px;
	color: var(--cx-muted);
	letter-spacing: 0.02em;
}

/* Hidden radios drive scenario selection. */
.contingent-scenarios .cx-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Scenario buttons */
.contingent-scenarios .cx-picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 24px;
}
.contingent-scenarios .cx-pick {
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--cx-border);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cx-ink);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	user-select: none;
}
.contingent-scenarios .cx-pick:hover {
	border-color: var(--cx-blue);
}

/* Active scenario button: matched by :checked radio via sibling combinator. */
.contingent-scenarios .cx-radio[data-idx="0"]:checked  ~ .cx-picker .cx-pick[data-idx="0"],
.contingent-scenarios .cx-radio[data-idx="1"]:checked  ~ .cx-picker .cx-pick[data-idx="1"],
.contingent-scenarios .cx-radio[data-idx="2"]:checked  ~ .cx-picker .cx-pick[data-idx="2"],
.contingent-scenarios .cx-radio[data-idx="3"]:checked  ~ .cx-picker .cx-pick[data-idx="3"],
.contingent-scenarios .cx-radio[data-idx="4"]:checked  ~ .cx-picker .cx-pick[data-idx="4"],
.contingent-scenarios .cx-radio[data-idx="5"]:checked  ~ .cx-picker .cx-pick[data-idx="5"],
.contingent-scenarios .cx-radio[data-idx="6"]:checked  ~ .cx-picker .cx-pick[data-idx="6"],
.contingent-scenarios .cx-radio[data-idx="7"]:checked  ~ .cx-picker .cx-pick[data-idx="7"],
.contingent-scenarios .cx-radio[data-idx="8"]:checked  ~ .cx-picker .cx-pick[data-idx="8"],
.contingent-scenarios .cx-radio[data-idx="9"]:checked  ~ .cx-picker .cx-pick[data-idx="9"],
.contingent-scenarios .cx-radio[data-idx="10"]:checked ~ .cx-picker .cx-pick[data-idx="10"],
.contingent-scenarios .cx-radio[data-idx="11"]:checked ~ .cx-picker .cx-pick[data-idx="11"],
.contingent-scenarios .cx-radio[data-idx="12"]:checked ~ .cx-picker .cx-pick[data-idx="12"],
.contingent-scenarios .cx-radio[data-idx="13"]:checked ~ .cx-picker .cx-pick[data-idx="13"],
.contingent-scenarios .cx-radio[data-idx="14"]:checked ~ .cx-picker .cx-pick[data-idx="14"],
.contingent-scenarios .cx-radio[data-idx="15"]:checked ~ .cx-picker .cx-pick[data-idx="15"],
.contingent-scenarios .cx-radio[data-idx="16"]:checked ~ .cx-picker .cx-pick[data-idx="16"],
.contingent-scenarios .cx-radio[data-idx="17"]:checked ~ .cx-picker .cx-pick[data-idx="17"],
.contingent-scenarios .cx-radio[data-idx="18"]:checked ~ .cx-picker .cx-pick[data-idx="18"],
.contingent-scenarios .cx-radio[data-idx="19"]:checked ~ .cx-picker .cx-pick[data-idx="19"] {
	border-color: var(--cx-blue);
	box-shadow: 0 0 0 1px var(--cx-blue), 0 6px 14px rgba(31, 75, 255, 0.12);
}

/* Focus ring on active button when keyboard-focused. */
.contingent-scenarios .cx-radio[data-idx="0"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="0"],
.contingent-scenarios .cx-radio[data-idx="1"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="1"],
.contingent-scenarios .cx-radio[data-idx="2"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="2"],
.contingent-scenarios .cx-radio[data-idx="3"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="3"],
.contingent-scenarios .cx-radio[data-idx="4"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="4"],
.contingent-scenarios .cx-radio[data-idx="5"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="5"],
.contingent-scenarios .cx-radio[data-idx="6"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="6"],
.contingent-scenarios .cx-radio[data-idx="7"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="7"],
.contingent-scenarios .cx-radio[data-idx="8"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="8"],
.contingent-scenarios .cx-radio[data-idx="9"]:focus-visible  ~ .cx-picker .cx-pick[data-idx="9"],
.contingent-scenarios .cx-radio[data-idx="10"]:focus-visible ~ .cx-picker .cx-pick[data-idx="10"],
.contingent-scenarios .cx-radio[data-idx="11"]:focus-visible ~ .cx-picker .cx-pick[data-idx="11"],
.contingent-scenarios .cx-radio[data-idx="12"]:focus-visible ~ .cx-picker .cx-pick[data-idx="12"],
.contingent-scenarios .cx-radio[data-idx="13"]:focus-visible ~ .cx-picker .cx-pick[data-idx="13"],
.contingent-scenarios .cx-radio[data-idx="14"]:focus-visible ~ .cx-picker .cx-pick[data-idx="14"],
.contingent-scenarios .cx-radio[data-idx="15"]:focus-visible ~ .cx-picker .cx-pick[data-idx="15"],
.contingent-scenarios .cx-radio[data-idx="16"]:focus-visible ~ .cx-picker .cx-pick[data-idx="16"],
.contingent-scenarios .cx-radio[data-idx="17"]:focus-visible ~ .cx-picker .cx-pick[data-idx="17"],
.contingent-scenarios .cx-radio[data-idx="18"]:focus-visible ~ .cx-picker .cx-pick[data-idx="18"],
.contingent-scenarios .cx-radio[data-idx="19"]:focus-visible ~ .cx-picker .cx-pick[data-idx="19"] {
	outline: 2px solid var(--cx-blue);
	outline-offset: 2px;
}

/* Panels */
.contingent-scenarios .cx-panels {
	padding: 8px 24px 24px;
	border-top: 1px solid var(--cx-border);
}
.contingent-scenarios .cx-panel {
	display: none;
	animation: cx-fade 0.25s ease-out;
}
.contingent-scenarios .cx-radio[data-idx="0"]:checked  ~ .cx-panels .cx-panel[data-idx="0"],
.contingent-scenarios .cx-radio[data-idx="1"]:checked  ~ .cx-panels .cx-panel[data-idx="1"],
.contingent-scenarios .cx-radio[data-idx="2"]:checked  ~ .cx-panels .cx-panel[data-idx="2"],
.contingent-scenarios .cx-radio[data-idx="3"]:checked  ~ .cx-panels .cx-panel[data-idx="3"],
.contingent-scenarios .cx-radio[data-idx="4"]:checked  ~ .cx-panels .cx-panel[data-idx="4"],
.contingent-scenarios .cx-radio[data-idx="5"]:checked  ~ .cx-panels .cx-panel[data-idx="5"],
.contingent-scenarios .cx-radio[data-idx="6"]:checked  ~ .cx-panels .cx-panel[data-idx="6"],
.contingent-scenarios .cx-radio[data-idx="7"]:checked  ~ .cx-panels .cx-panel[data-idx="7"],
.contingent-scenarios .cx-radio[data-idx="8"]:checked  ~ .cx-panels .cx-panel[data-idx="8"],
.contingent-scenarios .cx-radio[data-idx="9"]:checked  ~ .cx-panels .cx-panel[data-idx="9"],
.contingent-scenarios .cx-radio[data-idx="10"]:checked ~ .cx-panels .cx-panel[data-idx="10"],
.contingent-scenarios .cx-radio[data-idx="11"]:checked ~ .cx-panels .cx-panel[data-idx="11"],
.contingent-scenarios .cx-radio[data-idx="12"]:checked ~ .cx-panels .cx-panel[data-idx="12"],
.contingent-scenarios .cx-radio[data-idx="13"]:checked ~ .cx-panels .cx-panel[data-idx="13"],
.contingent-scenarios .cx-radio[data-idx="14"]:checked ~ .cx-panels .cx-panel[data-idx="14"],
.contingent-scenarios .cx-radio[data-idx="15"]:checked ~ .cx-panels .cx-panel[data-idx="15"],
.contingent-scenarios .cx-radio[data-idx="16"]:checked ~ .cx-panels .cx-panel[data-idx="16"],
.contingent-scenarios .cx-radio[data-idx="17"]:checked ~ .cx-panels .cx-panel[data-idx="17"],
.contingent-scenarios .cx-radio[data-idx="18"]:checked ~ .cx-panels .cx-panel[data-idx="18"],
.contingent-scenarios .cx-radio[data-idx="19"]:checked ~ .cx-panels .cx-panel[data-idx="19"] {
	display: block;
}
@keyframes cx-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Attribute list */
.contingent-scenarios .cx-attrs {
	margin: 8px 0 0;
	padding: 0;
}
.contingent-scenarios .cx-attr {
	display: grid;
	grid-template-columns: minmax(180px, 240px) 1fr;
	align-items: center;
	gap: 16px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--cx-border);
}
.contingent-scenarios .cx-attr:last-child {
	border-bottom: 0;
}
.contingent-scenarios .cx-attr-label {
	margin: 0;
	font-family: var(--cx-mono);
	font-size: 12px;
	color: var(--cx-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.contingent-scenarios .cx-attr-value {
	margin: 0;
	font-size: 14px;
	color: var(--cx-ink);
}

/* Value styles */
.contingent-scenarios .cx-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	font-family: var(--cx-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
.contingent-scenarios .cx-pill-orange {
	background: var(--cx-orange-soft);
	color: var(--cx-orange);
}
.contingent-scenarios .cx-pill-blue {
	background: var(--cx-blue-soft);
	color: var(--cx-blue);
}
.contingent-scenarios .cx-plain {
	font-weight: 700;
	color: var(--cx-ink);
}

/* Bottom guidance note */
.contingent-scenarios .cx-note {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--cx-orange-soft);
	color: var(--cx-orange);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.55;
}

/* Responsive */
@media (max-width: 720px) {
	.contingent-scenarios .cx-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.contingent-scenarios .cx-picker {
		grid-template-columns: 1fr;
	}
	.contingent-scenarios .cx-attr {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}