/**
 * pot-odds-page.css
 *
 * Widget-specific styles for the Pot Odds Masterclass editorial page.
 * Layered on top of texas-holdem.css (the shared editorial design system).
 * Loaded only when btf_is_po_page() returns true.
 *
 * All selectors scoped under .btf-po-page where needed to avoid leaking.
 */

/* ── Breadcrumb link fix ──────────────────────────────────────────────
   base.css `.prose a:not(.rc-cta)...` (specificity 41) beats the native
   `.hero .breadcrumb a` rule (specificity 21), making breadcrumb links
   felt-green on the felt background = invisible. Match the :not() chain
   so our inherit wins. */
body.btf-po-page .prose .btf-po-hero-section a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* ── Text + bold on dark panels ───────────────────────────────────────
   base.css forces dark ink on `p:not([class])` and `.prose strong`.
   Inside our dark-felt panels ALL text must be cream, not inherited
   ink. We use var(--on-dark) explicitly to break the chain. */
body.btf-po-page .prose .btf-po-example-detail p,
body.btf-po-page .prose .btf-po-example-detail b,
body.btf-po-page .prose .btf-po-example-detail strong,
body.btf-po-page .prose .btf-po-result p,
body.btf-po-page .prose .btf-po-result b,
body.btf-po-page .prose .btf-po-result strong,
body.btf-po-page .prose .btf-po-outs-result p,
body.btf-po-page .prose .btf-po-outs-result b,
body.btf-po-page .prose .btf-po-outs-result strong,
body.btf-po-page .prose .btf-po-quiz-explain p,
body.btf-po-page .prose .btf-po-quiz-explain b,
body.btf-po-page .prose .btf-po-quiz-explain strong,
body.btf-po-page .prose .btf-po-imp-formula b,
body.btf-po-page .prose .btf-po-imp-formula strong {
	color: var( --on-dark );
}

/* ── Hero formula card ───────────────────────────────────────────────── */

.btf-po-formula {
	background: rgba( 244, 239, 230, .05 );
	border: 1px solid rgba( 244, 239, 230, .12 );
	border-radius: var( --radius );
	padding: 1.4rem 1.6rem;
	font-family: "Instrument Serif", serif;
	align-self: center;
}

.btf-po-formula-label {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba( 244, 239, 230, .5 );
	margin-bottom: .7rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.btf-po-formula-label::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var( --brass );
	border-radius: 1px;
	transform: rotate( 45deg );
}

.btf-po-formula .eq {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp( 1rem, 2vw, 1.45rem );
	font-weight: 300;
	letter-spacing: -.01em;
	color: var( --on-dark );
	flex-wrap: wrap;
}

.btf-po-formula .frac {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.05;
}

.btf-po-formula .frac .top {
	padding: 0 .4em .15em;
	border-bottom: 1px solid rgba( 244, 239, 230, .4 );
	font-size: .85em;
}

.btf-po-formula .frac .bot {
	padding: .15em .4em 0;
	font-size: .85em;
	color: var( --brass );
}

.btf-po-formula .equals { opacity: .5; }

.btf-po-formula .note {
	font-family: "Outfit", sans-serif;
	font-size: .85rem;
	color: var( --on-dark );
	margin-top: .9rem;
	line-height: 1.5;
}

/* ── How-to step cards ───────────────────────────────────────────────── */

.btf-po-howto {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3rem;
	align-items: start;
}

@media ( max-width: 760px ) {
	.btf-po-howto {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.btf-po-howto-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .8rem;
}

@media ( max-width: 760px ) {
	.btf-po-howto-cards {
		grid-template-columns: 1fr;
	}
}

.btf-po-howto-card {
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: var( --radius-sm );
	padding: 1.1rem;
}

.btf-po-howto-card .step-num {
	font-family: "JetBrains Mono", monospace;
	font-size: .68rem;
	letter-spacing: .14em;
	color: var( --ink4 );
	text-transform: uppercase;
}

.btf-po-howto-card .step-title {
	font-family: "Instrument Serif", serif;
	font-size: 1.1rem;
	font-weight: 500;
	margin: .4em 0 .3em;
	letter-spacing: -.01em;
}

.btf-po-howto-card .step-desc {
	margin: 0;
	font-size: .82rem;
	color: var( --ink3 );
	line-height: 1.5;
}

/* ── 5-step worked example ───────────────────────────────────────────── */

.btf-po-example {
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	padding: 1.6rem;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 1.5rem;
}

@media ( max-width: 760px ) {
	.btf-po-example {
		grid-template-columns: 1fr;
	}
}

.btf-po-example-steps {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.btf-po-example-step {
	text-align: left;
	padding: .75rem 1rem;
	background: transparent;
	border: 1px solid var( --rule );
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
	color: var( --ink3 );
	display: flex;
	align-items: center;
	gap: .7rem;
	transition: all .15s;
}

.btf-po-example-step:hover {
	border-color: var( --felt );
}

.btf-po-example-step.is-active {
	background: var( --felt );
	color: var( --on-dark );
	border-color: var( --felt );
}

.btf-po-example-step .num {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	opacity: .7;
	letter-spacing: .1em;
	font-weight: 600;
	min-width: 1.5em;
}

.btf-po-example-step .lab {
	font-family: "Instrument Serif", serif;
	font-size: 1rem;
	font-weight: 400;
}

.btf-po-example-detail {
	background: linear-gradient( 160deg, var( --felt ), #142e22 );
	color: var( --on-dark );
	border-radius: var( --radius-sm );
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.btf-po-example-detail .step-label {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --brass );
	margin-bottom: .7rem;
}

.btf-po-example-detail .step-body {
	font-family: "Instrument Serif", serif;
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.btf-po-example-detail .step-body b {
	font-weight: 600;
}

.btf-po-example-progress {
	display: flex;
	gap: .4rem;
	margin-top: 1.5rem;
}

.btf-po-example-progress span {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	transition: background .2s;
}

.btf-po-next-btn {
	margin-top: 1.2rem;
	align-self: start;
	background: var( --brass );
	color: #fff !important;
	border: 0;
	padding: .55rem 1rem;
	border-radius: 6px;
	font-weight: 600 !important;
	font-size: .85rem;
	cursor: pointer;
	letter-spacing: .02em;
	text-decoration: none !important;
	display: inline-block;
}

.btf-po-next-btn:hover {
	opacity: .9;
}

/* ── Big calculator (pot odds + implied) ─────────────────────────────── */

.btf-po-bigcalc {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

@media ( max-width: 880px ) {
	.btf-po-bigcalc {
		grid-template-columns: 1fr;
	}
}

.btf-po-controls {
	background: var( --surface );
	border-radius: var( --radius );
	padding: 1.5rem;
	border: 1px solid var( --rule );
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.btf-po-input label {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ink4 );
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .4rem;
}

.btf-po-input label .hint {
	font-size: .68rem;
	opacity: .7;
	text-transform: none;
	letter-spacing: .05em;
}

.btf-po-numwrap {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	border-bottom: 1.5px solid transparent;
	padding: .2rem 0;
	transition: border-color .15s;
}

.btf-po-numwrap:hover,
.btf-po-numwrap:focus-within {
	border-bottom-color: var( --ink );
}

.btf-po-numwrap .currency {
	font-family: "Instrument Serif", serif;
	font-size: 1.5rem;
	color: var( --ink4 );
}

.btf-po-numwrap input[type="number"] {
	border: 0;
	background: transparent;
	font: 500 2.2rem/1 "Instrument Serif", serif;
	width: 100%;
	color: var( --ink );
	outline: none;
	letter-spacing: -.02em;
	-moz-appearance: textfield;
}

.btf-po-numwrap input[type="number"]::-webkit-outer-spin-button,
.btf-po-numwrap input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.btf-po-slider {
	width: 100%;
	margin-top: .5rem;
	accent-color: var( --felt );
}

.btf-po-presets {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
	margin-top: .6rem;
}

.btf-po-presets button {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	padding: .35rem .6rem;
	background: transparent;
	border: 1px solid var( --rule );
	border-radius: 4px;
	cursor: pointer;
	color: var( --ink4 );
	transition: all .12s;
}

.btf-po-presets button:hover {
	color: var( --ink );
	border-color: var( --ink );
	background: #f2efe9;
}

.btf-po-presets button.is-active {
	color: var( --on-dark );
	border-color: var( --felt );
	background: var( --felt );
}

/* Result panel (shared by pot-odds calc + implied odds) */
.btf-po-result {
	background: linear-gradient( 160deg, var( --felt ), #142e22 );
	color: var( --on-dark );
	padding: 1.6rem;
	border-radius: var( --radius );
	display: flex;
	flex-direction: column;
	gap: .7rem;
	position: relative;
	overflow: hidden;
}

.btf-po-result .lbl {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --brass );
}

.btf-po-result .big {
	font-family: "Instrument Serif", serif;
	font-size: clamp( 2.8rem, 6vw, 4rem );
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
}

.btf-po-result .big .unit {
	font-size: .42em;
	opacity: .55;
	margin-left: .1em;
}

.btf-po-result .ratio {
	font-family: "JetBrains Mono", monospace;
	font-size: .82rem;
	letter-spacing: .06em;
	color: rgba( 244, 239, 230, .65 );
}

.btf-po-result .ratio b {
	color: var( --on-dark );
	font-weight: 600;
}

.btf-po-result .verdict {
	font-size: .94rem;
	line-height: 1.5;
	color: rgba( 244, 239, 230, .85 );
	padding-top: .9rem;
	border-top: 1px solid rgba( 244, 239, 230, .15 );
	margin-top: auto;
}

.btf-po-result .verdict b {
	color: var( --brass );
	font-family: "JetBrains Mono", monospace;
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .35em;
	font-weight: 600;
}

.btf-po-bar {
	display: flex;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	background: rgba( 244, 239, 230, .12 );
}

.btf-po-bar .need {
	background: linear-gradient( 90deg, var( --brass ), #b89656 );
	transition: width .25s ease;
}

/* Chip visualizer */
.btf-po-visual {
	margin-top: 1rem;
	background: #f2efe9;
	border-radius: var( --radius-sm );
	padding: .9rem 1.1rem;
	font-family: "JetBrains Mono", monospace;
	font-size: .78rem;
	color: var( --ink );
	display: flex;
	align-items: flex-end;
	gap: .8rem;
	flex-wrap: nowrap;
	overflow: hidden;
}

.btf-po-visual .stack {
	display: flex;
	align-items: flex-end;
	gap: 1px;
	height: 36px;
}

.btf-po-visual .stack span {
	width: 8px;
	background: var( --felt );
	border-top: 1px solid rgba( 255, 255, 255, .3 );
	border-radius: 1px;
}

.btf-po-visual .stack.bet span {
	background: var( --brass );
}

.btf-po-visual .lab {
	font-size: .7rem;
	color: var( --ink4 );
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ── Outs counter ────────────────────────────────────────────────────── */

.btf-po-outs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media ( max-width: 760px ) {
	.btf-po-outs-grid {
		grid-template-columns: 1fr;
	}
}

.btf-po-outs-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .4rem;
}

.btf-po-out-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .7rem;
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: 6px;
	cursor: pointer;
	transition: all .12s;
	text-align: left;
	font: 500 .82rem/1.3 "Outfit", sans-serif;
	color: var( --ink3 );
}

.btf-po-out-item:hover {
	border-color: var( --felt );
}

.btf-po-out-item.is-active {
	background: var( --felt );
	color: var( --on-dark );
	border-color: var( --felt );
}

.btf-po-out-item .n {
	font-family: "JetBrains Mono", monospace;
	font-weight: 700;
	color: var( --brass );
	font-size: .92rem;
	min-width: 1.5em;
}

.btf-po-out-item.is-active .n {
	color: #b89656;
}

.btf-po-out-item small {
	display: block;
	font-size: .7rem;
	font-weight: 400;
	opacity: .7;
	margin-top: .1em;
}

.btf-po-outs-result {
	background: var( --felt );
	color: var( --on-dark );
	padding: 1.4rem;
	border-radius: var( --radius );
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.btf-po-outs-result .out-num {
	font-family: "Instrument Serif", serif;
	font-size: 4rem;
	line-height: 1;
	font-weight: 300;
	color: var( --brass );
	letter-spacing: -.04em;
}

.btf-po-outs-result .out-num small {
	font-family: "JetBrains Mono", monospace;
	font-size: .8rem;
	color: rgba( 244, 239, 230, .5 );
	letter-spacing: .14em;
	text-transform: uppercase;
	display: block;
	font-weight: 500;
	margin-top: .2em;
}

.btf-po-pcts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
}

.btf-po-pct {
	padding: .75rem;
	background: rgba( 244, 239, 230, .06 );
	border-radius: 6px;
}

.btf-po-pct b {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 244, 239, 230, .55 );
	margin-bottom: .3em;
	font-weight: 500;
}

.btf-po-pct .v {
	font-family: "Instrument Serif", serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
}

.btf-po-pct .v .u {
	font-size: .75rem;
	opacity: .5;
	margin-left: .1em;
}

.btf-po-outs-rule {
	margin-top: 1rem;
	padding: .85rem 1rem;
	background: rgba( 244, 239, 230, .06 );
	border-radius: 6px;
	font-size: .85rem;
	line-height: 1.5;
	color: rgba( 244, 239, 230, .78 );
}

.btf-po-outs-rule b {
	color: var( --brass );
	font-family: "JetBrains Mono", monospace;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .3em;
}

/* ── MDF ─────────────────────────────────────────────────────────────── */

.btf-po-mdf-display {
	font-family: "Instrument Serif", serif;
	font-size: clamp( 3rem, 8vw, 5rem );
	line-height: 1;
	font-weight: 300;
	letter-spacing: -.03em;
	color: var( --ink );
}

.btf-po-mdf-display .unit {
	font-size: .4em;
	color: var( --ink4 );
}

.btf-po-mdf-row {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: .5rem;
	margin-top: 1.2rem;
}

@media ( max-width: 540px ) {
	.btf-po-mdf-row {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.btf-po-mdf-btn {
	padding: .75rem .5rem;
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
	transition: all .15s;
	font: inherit;
	color: inherit;
}

.btf-po-mdf-btn:hover,
.btf-po-mdf-btn.is-active {
	background: var( --felt );
	color: var( --on-dark );
	border-color: var( --felt );
}

.btf-po-mdf-btn .lab {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .06em;
	color: var( --ink4 );
}

.btf-po-mdf-btn:hover .lab,
.btf-po-mdf-btn.is-active .lab {
	color: var( --brass );
}

.btf-po-mdf-btn .v {
	font-family: "Instrument Serif", serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.1;
	margin-top: .2em;
	letter-spacing: -.02em;
}

/* ── Bluff frequency ─────────────────────────────────────────────────── */

.btf-po-bluff-stack {
	display: flex;
	height: 54px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var( --rule );
	margin-top: 1rem;
}

.btf-po-bluff-stack .value-seg {
	background: var( --felt );
	color: var( --on-dark );
	display: grid;
	place-items: center;
	font-family: "Instrument Serif", serif;
	font-weight: 500;
	font-size: 1rem;
}

.btf-po-bluff-stack .bluff-seg {
	background: #c9a24a;
	color: var( --on-dark );
	display: grid;
	place-items: center;
	font-family: "Instrument Serif", serif;
	font-weight: 500;
	font-size: 1rem;
}

.btf-po-bluff-labels {
	display: flex;
	justify-content: space-between;
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	color: var( --ink4 );
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-top: .5rem;
}

/* ── Cheatsheet grid ─────────────────────────────────────────────────── */

.btf-po-cheat-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
	gap: .6rem;
}

.btf-po-cheat-card {
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	padding: 1rem 1.1rem;
	transition: all .15s;
}

.btf-po-cheat-card:hover {
	border-color: var( --felt );
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, .08 );
}

.btf-po-cheat-card .size {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ink4 );
}

.btf-po-cheat-card .pct {
	font-family: "Instrument Serif", serif;
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	margin: .3em 0 .2em;
	color: var( --ink );
}

.btf-po-cheat-card .pct .u {
	font-size: .45em;
	color: var( --ink4 );
}

.btf-po-cheat-card .card-ratio {
	font-family: "JetBrains Mono", monospace;
	font-size: .76rem;
	color: var( --felt );
	font-weight: 600;
	letter-spacing: .05em;
}

.btf-po-cheat-card .desc {
	font-size: .82rem;
	color: var( --ink3 );
	margin-top: .6rem;
	line-height: 1.5;
}

/* ── Leaks list ──────────────────────────────────────────────────────── */

.btf-po-leaks {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.btf-po-leak {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: start;
	padding: 1rem 1.2rem;
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: 8px;
}

@media ( max-width: 600px ) {
	.btf-po-leak {
		grid-template-columns: auto 1fr;
	}
	.btf-po-leak .cost {
		grid-column: 1 / -1;
		text-align: left;
	}
}

.btf-po-leak .ico {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	letter-spacing: .1em;
	background: #f0d7c8;
	color: #7a2e15;
	padding: .25rem .5rem;
	border-radius: 3px;
	font-weight: 700;
	flex-shrink: 0;
	text-transform: uppercase;
}

.btf-po-leak h5 {
	font-family: "Instrument Serif", serif;
	font-size: 1.05rem;
	margin: 0 0 .25em;
	font-weight: 500;
}

.btf-po-leak p {
	margin: 0;
	color: var( --ink3 );
	font-size: .9rem;
	line-height: 1.55;
}

.btf-po-leak .cost {
	font-family: "JetBrains Mono", monospace;
	font-size: .7rem;
	color: #8B2D2D;
	letter-spacing: .05em;
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
}

/* ── Quiz ────────────────────────────────────────────────────────────── */

.btf-po-quiz {
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	padding: 1.6rem;
}

.btf-po-quiz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.2rem;
}

.btf-po-quiz-header .qno {
	font-family: "JetBrains Mono", monospace;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ink4 );
}

.btf-po-quiz-header .score {
	font-family: "JetBrains Mono", monospace;
	font-size: .85rem;
	color: var( --ink3 );
}

.btf-po-quiz-header .score b {
	color: var( --felt );
	font-family: "Instrument Serif", serif;
	font-size: 1.1rem;
	font-weight: 500;
}

.btf-po-quiz-spot {
	font-family: "Instrument Serif", serif;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var( --ink );
	margin-bottom: .8rem;
	font-weight: 400;
}

.btf-po-quiz-meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-family: "JetBrains Mono", monospace;
	font-size: .78rem;
	color: var( --ink4 );
	margin-bottom: 1.2rem;
	padding: .75rem 1rem;
	background: #f2efe9;
	border-radius: 6px;
}

.btf-po-quiz-meta b {
	color: var( --ink );
	font-weight: 600;
	margin-right: .3em;
}

.btf-po-quiz-options {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.btf-po-quiz-opt {
	padding: .85rem 1rem;
	background: var( --bg );
	border: 1px solid var( --rule );
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	font: 500 .92rem/1.4 "Outfit", sans-serif;
	color: var( --ink );
	transition: all .12s;
	display: flex;
	align-items: center;
	gap: .8rem;
}

.btf-po-quiz-opt:hover {
	border-color: var( --ink );
}

.btf-po-quiz-opt .letter {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f2efe9;
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: .78rem;
	font-weight: 600;
	color: var( --ink4 );
	flex-shrink: 0;
}

.btf-po-quiz-opt.is-correct {
	background: #d9e4d2;
	border-color: #5a8550;
	color: #2d4a2a;
}

.btf-po-quiz-opt.is-correct .letter {
	background: #5a8550;
	color: white;
}

.btf-po-quiz-opt.is-incorrect {
	background: #f0d7c8;
	border-color: #a35540;
	color: #7a2e15;
}

.btf-po-quiz-opt.is-incorrect .letter {
	background: #a35540;
	color: white;
}

.btf-po-quiz-opt:disabled {
	cursor: default;
}

.btf-po-quiz-explain {
	margin-top: 1.1rem;
	padding: 1rem 1.1rem;
	background: var( --felt );
	color: var( --on-dark );
	border-radius: 8px;
	line-height: 1.6;
}

body.btf-po-page .prose .btf-po-quiz-explain p {
	font-size: .94rem;
}

.btf-po-quiz-explain b {
	color: var( --brass );
	font-family: "JetBrains Mono", monospace;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .4em;
}

.btf-po-quiz-explain.is-wrong {
	background: #e8d4ca;
	color: #6a2818;
}

body.btf-po-page .prose .btf-po-quiz-explain.is-wrong b,
body.btf-po-page .prose .btf-po-quiz-explain.is-wrong p {
	color: #6a2818;
}

.btf-po-quiz-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.2rem;
}

.btf-po-quiz-progress {
	display: flex;
	gap: .25rem;
}

.btf-po-quiz-progress span {
	width: 18px;
	height: 4px;
	border-radius: 2px;
	background: #f2efe9;
}

.btf-po-quiz-progress span.done { background: var( --felt ); }
.btf-po-quiz-progress span.wrong { background: #8B2D2D; }
.btf-po-quiz-progress span.current { background: var( --brass ); }

.btf-po-quiz-final {
	text-align: center;
	padding: 2.5rem 1.5rem;
	background: var( --surface );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
}

.btf-po-quiz-final h3 {
	font-family: "Instrument Serif", serif;
	font-size: 2rem;
	font-weight: 300;
	margin: 0 0 .4em;
	letter-spacing: -.02em;
}

.btf-po-quiz-final .big {
	font-family: "Instrument Serif", serif;
	font-size: 4.5rem;
	font-weight: 300;
	color: var( --felt );
	line-height: 1;
	margin: .3em 0;
}

body.btf-po-page .prose .btf-po-quiz-final p {
	color: var( --ink3 );
	max-width: 48ch;
	margin: 1rem auto;
	text-align: center;
}

/* ── Implied odds formula display ────────────────────────────────────── */

.btf-po-imp-formula {
	font-family: "JetBrains Mono", monospace;
	font-size: .85rem;
	background: #f2efe9;
	padding: .85rem 1rem;
	border-radius: 6px;
	color: var( --ink4 );
	line-height: 1.6;
}

.btf-po-imp-formula b {
	color: var( --ink3 );
	font-weight: 600;
}

/* ── Force cream/inherit on headings inside dark panels ─────────────── */
/* base.css sets `h1–h6 { color: var(--ink) }` which overrides the
   intended cream text on felt-green backgrounds throughout the page. */

body.btf-po-page .prose .hero h1,
body.btf-po-page .prose .btf-po-example-detail h3,
body.btf-po-page .prose .btf-po-example-detail h4,
body.btf-po-page .prose .btf-po-result h3,
body.btf-po-page .prose .btf-po-outs-result h3,
body.btf-po-page .prose .btf-po-quiz-explain h3 {
    color: inherit;
}

/* Hero heading must be cream on felt */
body.btf-po-page .hero h1 {
    color: var(--on-dark);
}

body.btf-po-page .btf-po-hero-section h1 {
    color: var(--on-dark) !important;
}

/* ── Selection colors on dark panels (match TH page) ─────────────────── */

body.btf-po-page .btf-po-result ::selection,
body.btf-po-page .btf-po-result::selection,
body.btf-po-page .btf-po-outs-result ::selection,
body.btf-po-page .btf-po-outs-result::selection,
body.btf-po-page .btf-po-example-detail ::selection,
body.btf-po-page .btf-po-example-detail::selection,
body.btf-po-page .btf-po-example-step.is-active ::selection,
body.btf-po-page .btf-po-example-step.is-active::selection,
body.btf-po-page .btf-po-out-item.is-active ::selection,
body.btf-po-page .btf-po-out-item.is-active::selection,
body.btf-po-page .btf-po-mdf-btn.is-active ::selection,
body.btf-po-page .btf-po-mdf-btn.is-active::selection,
body.btf-po-page .btf-po-bluff-stack .value-seg ::selection,
body.btf-po-page .btf-po-bluff-stack .value-seg::selection,
body.btf-po-page .btf-po-bluff-stack .bluff-seg ::selection,
body.btf-po-page .btf-po-bluff-stack .bluff-seg::selection,
body.btf-po-page .btf-po-quiz-explain ::selection,
body.btf-po-page .btf-po-quiz-explain::selection {
	background: rgba( 212, 180, 74, .4 );
	color: var( --on-dark );
}