/* ──────────────────────────────────────────────────────────────────────────
 * Postflop Strategy masterclass — page-scoped styles.
 *
 * Loaded only on /poker/strategy/postflop/ (gate: btf_is_pf_page() in
 * functions.php). Sits on top of texas-holdem.css and reuses --th-*
 * design tokens. Scope every selector under body.btf-pf-page.
 *
 * Cascade gotchas baked in (learned from earlier masterclass builds):
 *   1. base.css `.section-paper > .wrap p:not([class])` (3 classes + 1
 *      element) wins over a plain `body.btf-pf-page ... p` rule. Add
 *      `.prose` to selector chains to win the specificity tiebreak.
 *   2. texas-holdem.css `body.btf-th-page .prose p { margin: 0 }` strips
 *      every paragraph's margin — use `.prose` chains to restore where
 *      needed.
 *   3. `.btf-th-eyebrow` is `display: flex` with a ::before brass dash.
 *      Don't override `display` — it stacks the dash on top.
 *   4. `.btf-th-display` is set to `margin: 0 0 .4em` site-wide; sections
 *      own their outer spacing via the eyebrow's `margin-bottom` instead.
 *   5. Default `::selection` becomes invisible on dark backgrounds; the
 *      gold highlight rule below covers every dark surface on this page.
 *   6. `.btf-th-hero a:not(.rc-cta):not(.btn-primary):not(.btn-ghost)`
 *      has `font-weight: inherit` — use the site's `.btn-primary` /
 *      `.btn-ghost` classes for hero CTAs instead of rolling custom.
 * ──────────────────────────────────────────────────────────────────── */

/* ── Selection on dark backgrounds — gold highlight, cream-on-dark text */
body.btf-pf-page .btf-pf-hero ::selection,
body.btf-pf-page .btf-pf-hero::selection,
body.btf-pf-page .btf-pf-hero-quote ::selection,
body.btf-pf-page .btf-pf-hero-quote::selection,
body.btf-pf-page .btf-pf-summary ::selection,
body.btf-pf-page .btf-pf-summary::selection,
body.btf-pf-page .btf-pf-reason-tab.active ::selection,
body.btf-pf-page .btf-pf-reason-tab.active::selection {
	background: rgba( 212, 180, 74, .4 );
	color: var( --on-dark );
}

/* Token aliases. */
body.btf-pf-page {
	--btf-pf-forest: var( --th-forest );
	--btf-pf-forest-2: var( --th-forest-2 );
	--btf-pf-gold: var( --th-gold );
	--btf-pf-gold-soft: var( --th-gold-soft );
	--btf-pf-cream: var( --th-cream );
	--btf-pf-cream-2: var( --th-cream-2 );
	--btf-pf-cream-3: var( --th-cream-3 );
	--btf-pf-ink: var( --th-ink );
	--btf-pf-ink-2: var( --th-ink-2 );
	--btf-pf-muted: var( --th-muted );
	--btf-pf-hair: var( --th-hair );
	--btf-pf-red: var( --th-red );
	--btf-pf-radius-lg: var( --th-radius-lg );
	--btf-pf-serif: var( --th-serif );
	--btf-pf-mono: var( --th-mono );
	--btf-pf-sans: var( --th-sans );
}

/* ── Hero ────────────────────────────────────────────────────────────── */
body.btf-pf-page .btf-pf-hero-body {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2rem;
}
@media ( max-width: 880px ) {
	body.btf-pf-page .btf-pf-hero-body { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-hero-cta {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
	margin-top: 1.4rem;
}

body.btf-pf-page .btf-pf-hero-quote {
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 14px;
	padding: 1.6rem 1.6rem 1.4rem;
	color: var( --btf-pf-cream );
	position: relative;
	font-family: var( --btf-pf-serif );
}
body.btf-pf-page .btf-pf-hq-mark {
	position: absolute;
	top: -.2em;
	left: .6rem;
	font-family: var( --btf-pf-serif );
	font-size: 5rem;
	line-height: 1;
	color: var( --btf-pf-gold-soft );
	opacity: .4;
}
body.btf-pf-page .prose .btf-pf-hero-quote p {
	font-size: 1.18rem;
	line-height: 1.55;
	margin: 1.5rem 0 1rem;
	color: rgba( 255, 255, 255, .92 );
}
body.btf-pf-page .btf-pf-hero-quote p em {
	color: var( --btf-pf-gold-soft );
	font-style: italic;
}
body.btf-pf-page .btf-pf-hero-quote footer {
	font-family: var( --btf-pf-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .5 );
}

/* `.btf-th-eyebrow` carries a `::before` brass dash from texas-holdem.css
 * that's meant for section-level eyebrows above big serif headings. The
 * same class is used for tiny inline labels inside widgets (Board, Your
 * hand, Concrete example, Outs to improve, etc) — there the dash is
 * visual noise. Suppress it inside every "small label" container. */
body.btf-pf-page .btf-pf-replay-head  > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-replay-half  > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-drill-block  > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-drill-head .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-rd-left      > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-rd-right     > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-rd-when      > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-callout-tile > .btf-th-eyebrow::before,
body.btf-pf-page .btf-pf-twocol-card  > .btf-th-eyebrow::before {
	display: none;
}
/* And for those same labels, drop the leading flex-gap that the dash
 * would have filled, plus tighten the size — they're labels, not section
 * headings. */
body.btf-pf-page .btf-pf-replay-head  > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-replay-half  > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-drill-block  > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-drill-head .btf-th-eyebrow,
body.btf-pf-page .btf-pf-rd-left      > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-rd-right     > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-rd-when      > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-callout-tile > .btf-th-eyebrow,
body.btf-pf-page .btf-pf-twocol-card  > .btf-th-eyebrow {
	gap: 0;
	font-size: .68rem;
	letter-spacing: .14em;
	color: var( --btf-pf-muted );
}

/* ── Section nav (sticky "On this page") ────────────────────────────── */
body.btf-pf-page .btf-pf-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var( --btf-pf-cream-2 );
	border-bottom: 1px solid var( --btf-pf-hair );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}
body.btf-pf-page .btf-pf-nav-inner {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: .85rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
body.btf-pf-page .btf-pf-nav-inner::-webkit-scrollbar { height: 0; display: none; }
body.btf-pf-page .btf-pf-nav-eyebrow {
	font-family: var( --btf-pf-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --btf-pf-muted );
	flex-shrink: 0;
}
body.btf-pf-page .btf-pf-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .2rem;
	flex: 1;
	flex-wrap: nowrap;
}
body.btf-pf-page .btf-pf-nav-list li { flex-shrink: 0; }
body.btf-pf-page .btf-pf-nav-list a {
	display: inline-flex;
	align-items: baseline;
	gap: .55em;
	padding: .4rem .75rem;
	border-radius: 6px;
	font-family: var( --btf-pf-sans );
	font-size: .88rem;
	font-weight: 500;
	color: var( --btf-pf-ink-2 );
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, background .15s;
}
body.btf-pf-page .btf-pf-nav-list a:hover {
	color: var( --btf-pf-ink );
	background: rgba( 0, 0, 0, .04 );
}
body.btf-pf-page .btf-pf-nav-list a.active {
	color: var( --btf-pf-forest );
	background: rgba( 29, 52, 38, .08 );
}
body.btf-pf-page .btf-pf-nav-num {
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .12em;
	color: var( --btf-pf-muted );
	font-weight: 600;
}
body.btf-pf-page .btf-pf-nav-list a.active .btf-pf-nav-num {
	color: var( --btf-pf-gold );
}

/* Sections need scroll-margin-top equal to nav height so anchor links
 * don't put the heading underneath the sticky nav. */
body.btf-pf-page .btf-pf-section { scroll-margin-top: 64px; }

/* ── Author bar — cred pills (Hand-tested / Solver-checked) ──────────── */
body.btf-pf-page .author-bar-creds {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	margin: .55rem 0 .9rem;
}
body.btf-pf-page .author-cred {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var( --btf-pf-mono );
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .3em .65em;
	border-radius: 3px;
	background: rgba( 29, 52, 38, .08 );
	color: var( --btf-pf-forest );
}
body.btf-pf-page .author-cred::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --btf-pf-gold );
}

/* ── Section wrappers + editorial spacing ────────────────────────────── */
body.btf-pf-page .btf-pf-section {
	padding: 4rem 0 3rem;
	scroll-margin-top: 80px;
}
body.btf-pf-page .btf-pf-section > .wrap > .btf-th-eyebrow {
	margin-bottom: .9rem;
}
body.btf-pf-page .prose .btf-pf-section h2.btf-th-display {
	margin: 0 0 .55em;
}
body.btf-pf-page .prose .btf-pf-section .btf-th-lede,
body.btf-pf-page .btf-pf-section .btf-th-lede {
	margin: 0 0 2rem;
	color: var( --btf-pf-ink-2 );
}

/* ── Cards (used in replays + drill) ─────────────────────────────────── */
body.btf-pf-page .btf-pf-card {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 52px;
	background: #fff;
	border: 1px solid rgba( 28, 24, 20, .18 );
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .12 ), 0 2px 6px rgba( 0, 0, 0, .06 );
	font-family: var( --btf-pf-serif );
	line-height: 1;
}
body.btf-pf-page .btf-pf-card--lg { width: 46px; height: 64px; }
body.btf-pf-page .btf-pf-card .rank { font-size: 1.05rem; font-weight: 400; }
body.btf-pf-page .btf-pf-card--lg .rank { font-size: 1.25rem; }
/* "10" is wider than every other rank — tighten letter-spacing and
 * trim the size a hair so it fits the narrow rank slot. */
body.btf-pf-page .btf-pf-card .rank.is-ten { letter-spacing: -.08em; font-size: .95rem; }
body.btf-pf-page .btf-pf-card--lg .rank.is-ten { letter-spacing: -.08em; font-size: 1.1rem; }
body.btf-pf-page .btf-pf-card .suit { font-size: 1rem; margin-top: .15em; }
body.btf-pf-page .btf-pf-card--lg .suit { font-size: 1.15rem; }
body.btf-pf-page .btf-pf-card--red   { color: #b03a3a; }
body.btf-pf-page .btf-pf-card--black { color: var( --btf-pf-ink ); }
body.btf-pf-page .btf-pf-card--slot {
	background: transparent;
	border: 1.5px dashed var( --btf-pf-hair );
	box-shadow: none;
}

/* ── Four reasons tab picker ─────────────────────────────────────────── */
body.btf-pf-page .btf-pf-reasons-tabs {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: .5rem;
	margin-bottom: 1.4rem;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-reasons-tabs { grid-template-columns: 1fr 1fr; }
}
body.btf-pf-page .btf-pf-reason-tab {
	position: relative;
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 10px;
	padding: 1rem 1.1rem;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: .35em;
	font: inherit;
	color: var( --btf-pf-ink );
	transition: border-color .15s, box-shadow .15s, background .15s;
}
body.btf-pf-page .btf-pf-reason-tab:hover {
	border-color: var( --btf-pf-forest );
	box-shadow: 0 1px 0 rgba( 29, 52, 38, .12 ), 0 4px 12px rgba( 29, 52, 38, .06 );
}
/* Visual cue that the active tile drives the panel below — a small gold
 * triangle "pointing down" sits at the bottom of the active tile. */
body.btf-pf-page .btf-pf-reason-tab.active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 12px;
	height: 12px;
	background: var( --btf-pf-forest );
	transform: translateX( -50% ) rotate( 45deg );
	z-index: 1;
}
body.btf-pf-page .btf-pf-reason-tab.active {
	background: var( --btf-pf-forest );
	border-color: var( --btf-pf-forest );
	color: var( --btf-pf-cream );
}
body.btf-pf-page .btf-pf-reason-num {
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	color: var( --btf-pf-muted );
}
body.btf-pf-page .btf-pf-reason-tab.active .btf-pf-reason-num {
	color: var( --btf-pf-gold-soft );
}
body.btf-pf-page .btf-pf-reason-tab b {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: -.01em;
	line-height: 1;
}
body.btf-pf-page .btf-pf-reason-tab > span:last-child {
	font-size: .85rem;
	color: var( --btf-pf-ink-2 );
	line-height: 1.35;
}
body.btf-pf-page .btf-pf-reason-tab.active > span:last-child {
	color: rgba( 243, 238, 226, .78 );
}

body.btf-pf-page .btf-pf-reason-detail {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 0;
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 14px;
	overflow: hidden;
}
@media ( max-width: 900px ) {
	body.btf-pf-page .btf-pf-reason-detail { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-rd-left { padding: 1.6rem 1.8rem; }
body.btf-pf-page .btf-pf-rd-right {
	padding: 1.6rem 1.8rem;
	background: var( --btf-pf-cream-3 );
	border-left: 1px solid var( --btf-pf-hair );
}
@media ( max-width: 900px ) {
	body.btf-pf-page .btf-pf-rd-right {
		border-left: 0;
		border-top: 1px solid var( --btf-pf-hair );
	}
}
body.btf-pf-page .btf-pf-rd-blurb {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.5rem;
	margin: .35em 0 .5em;
	letter-spacing: -.01em;
}
body.btf-pf-page .prose .btf-pf-rd-body {
	font-size: 1rem;
	line-height: 1.6;
	color: var( --btf-pf-ink-2 );
	margin: 0 0 1.2rem;
}
body.btf-pf-page .btf-pf-rd-when {
	border-top: 1px dashed var( --btf-pf-hair );
	padding-top: .9rem;
}
body.btf-pf-page .prose .btf-pf-rd-when p {
	font-family: var( --btf-pf-serif );
	font-style: italic;
	font-size: 1.05rem;
	margin: .3em 0 0;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .prose .btf-pf-rd-example {
	font-family: var( --btf-pf-serif );
	font-size: 1.15rem;
	line-height: 1.5;
	font-style: italic;
	margin: .5em 0 0;
	color: var( --btf-pf-ink );
}

/* ── Hand replay ─────────────────────────────────────────────────────── */
body.btf-pf-page .btf-pf-replay {
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 1.4rem;
}
body.btf-pf-page .btf-pf-replay-head {
	padding: 1.4rem 1.6rem .9rem;
	border-bottom: 1px solid var( --btf-pf-hair );
}
body.btf-pf-page .btf-pf-replay-title {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.55rem;
	margin: .35em 0 .5em;
	letter-spacing: -.01em;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .prose .btf-pf-replay-lede {
	font-size: .98rem;
	line-height: 1.55;
	color: var( --btf-pf-ink-2 );
	margin: 0;
	max-width: 70ch;
}

body.btf-pf-page .btf-pf-replay-body { padding: 1.4rem 1.6rem 1.6rem; }

/* Street progress indicator — passive breadcrumb-style. Future steps
 * are muted, past steps are still readable, the active step has the
 * forest accent + a small leading dot. No borders, no backgrounds, no
 * hover/cursor states. */
body.btf-pf-page .btf-pf-replay-streets {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .8rem;
	margin-bottom: 1.2rem;
	font-family: var( --btf-pf-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
body.btf-pf-page .btf-pf-street-step {
	color: var( --btf-pf-muted );
	display: inline-flex;
	align-items: center;
}
body.btf-pf-page .btf-pf-street-step + .btf-pf-street-step::before {
	content: "›";
	color: var( --btf-pf-muted );
	opacity: .55;
	margin-right: .8rem;
	font-weight: 400;
}
body.btf-pf-page .btf-pf-street-step.past { color: var( --btf-pf-ink-2 ); }
body.btf-pf-page .btf-pf-street-step.active {
	color: var( --btf-pf-forest );
	font-weight: 600;
}
body.btf-pf-page .btf-pf-street-step.active::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --btf-pf-gold );
	margin-left: .55em;
	vertical-align: .12em;
}

body.btf-pf-page .btf-pf-replay-table {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.2rem;
	padding: 1.1rem;
	background: var( --btf-pf-cream-3 );
	border-radius: 10px;
	margin-bottom: 1.1rem;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-replay-table { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-replay-half {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}
body.btf-pf-page .btf-pf-replay-cards {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	justify-content: center;
}

body.btf-pf-page .btf-pf-replay-action {
	padding: 1rem 1.2rem;
	background: var( --btf-pf-cream );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 8px;
	margin-bottom: 1rem;
}
body.btf-pf-page .btf-pf-street-pill {
	display: inline-block;
	font-family: var( --btf-pf-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --btf-pf-forest );
	background: rgba( 29, 52, 38, .08 );
	padding: .2em .55em;
	border-radius: 3px;
	margin-bottom: .55em;
}
body.btf-pf-page .prose .btf-pf-replay-action p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .btf-pf-outs-note {
	display: block;
	margin-top: .6em;
	padding-top: .6em;
	border-top: 1px dashed var( --btf-pf-hair );
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	color: var( --btf-pf-ink-2 );
}

body.btf-pf-page .btf-pf-decision { margin-bottom: 1rem; scroll-margin-top: 100px; }
body.btf-pf-page .btf-pf-decision-head {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-bottom: .8rem;
}
body.btf-pf-page .btf-pf-decision-badge {
	align-self: flex-start;
	font-family: var( --btf-pf-mono );
	font-size: .6rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .25em .6em;
	border-radius: 3px;
	background: rgba( 154, 123, 60, .14 );
	color: var( --btf-pf-gold );
}
body.btf-pf-page .btf-pf-decision-badge[hidden] { display: none; }
body.btf-pf-page .prose .btf-pf-decision-prompt {
	font-family: var( --btf-pf-serif );
	font-size: 1.2rem;
	font-style: italic;
	margin: 0 0 .7em;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .btf-pf-decision-opts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: .55rem;
}
/* Decision options — pure-white cards with a leading radio-style
 * indicator. White (instead of cream) puts visual distance between the
 * "this is info" panels above (.btf-pf-replay-action / -table) and the
 * "this is a choice you make" buttons. The leading dot reads as a
 * radio control + drives the picked/correct/wrong states. */
body.btf-pf-page .btf-pf-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35em;
	padding: 1rem 1.1rem 1rem 2.6rem;
	background: #fff;
	border: 1.5px solid rgba( 28, 24, 20, .12 );
	border-radius: 10px;
	font: inherit;
	cursor: pointer;
	text-align: left;
	color: var( --btf-pf-ink );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, .02 );
	transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
body.btf-pf-page .btf-pf-opt::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.1rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid var( --btf-pf-muted );
	background: #fff;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
body.btf-pf-page .btf-pf-opt:hover:not( :disabled ) {
	border-color: var( --btf-pf-forest );
	box-shadow: 0 1px 0 rgba( 29, 52, 38, .12 ), 0 4px 12px rgba( 29, 52, 38, .06 );
}
body.btf-pf-page .btf-pf-opt:hover:not( :disabled )::before {
	border-color: var( --btf-pf-forest );
}
body.btf-pf-page .btf-pf-opt:disabled { cursor: default; box-shadow: none; }
body.btf-pf-page .btf-pf-opt b {
	font-family: var( --btf-pf-sans );
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}
body.btf-pf-page .btf-pf-opt small {
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --btf-pf-forest );
}
body.btf-pf-page .btf-pf-opt small.wrong { color: var( --btf-pf-red ); }
/* Correct = green border + clear mint background + filled green dot.
 * Solid mint (not low-alpha forest, which dilutes to gray on cream). */
body.btf-pf-page .btf-pf-opt.correct {
	border-color: var( --btf-pf-forest );
	background: #dcebdf;
	opacity: 1;
}
body.btf-pf-page .btf-pf-opt.correct::before {
	border-color: var( --btf-pf-forest );
	background: var( --btf-pf-forest );
	box-shadow: inset 0 0 0 3px #fff;
}
/* When the user PICKED the correct one, lean harder into the green so
 * the "you got it right" signal feels rewarding. */
body.btf-pf-page .btf-pf-opt.picked.correct {
	border-color: var( --btf-pf-forest );
	background: #c8dfcd;
	box-shadow: 0 0 0 2px rgba( 29, 52, 38, .18 );
}
/* Wrong = the option the user picked that wasn't correct. Red border +
 * red dot. The correct one (also revealed) stays green so they can see
 * what they should have picked. */
body.btf-pf-page .btf-pf-opt.wrong {
	border-color: var( --btf-pf-red );
	background: #f5dcdc;
	opacity: 1;
}
body.btf-pf-page .btf-pf-opt.wrong::before {
	border-color: var( --btf-pf-red );
	background: var( --btf-pf-red );
	box-shadow: inset 0 0 0 3px #fff;
}
/* Non-picked, non-correct after a pick — dimmed so the eye is drawn to
 * the green correct + red wrong. */
body.btf-pf-page .btf-pf-opt:disabled:not( .correct ):not( .wrong ):not( .picked ) {
	opacity: .5;
}

body.btf-pf-page .btf-pf-replay-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --btf-pf-hair );
	gap: .8rem;
	flex-wrap: wrap;
}
/* `.btn-ghost` from base.css is themed for dark felt (white-on-transparent
 * with a faint border). Inside the replay panel — which sits on cream — it
 * renders nearly invisible. Re-skin it for light backgrounds here. */
/* Restart is a tertiary action — it should sit quietly on the panel, not
 * compete with the primary Next button. Transparent fill, text-tinted
 * border, ink-2 text — it reads like a link with a frame. */
body.btf-pf-page .btf-pf-replay-controls .btn-ghost {
	background: transparent;
	border-color: rgba( 28, 24, 20, .18 );
	color: var( --btf-pf-ink-2 );
	font-weight: 500;
}
/* `.btn-ghost` and `.btn-primary` from base.css are both
 * `display: inline-flex` which overrides the UA's `[hidden] { display: none }`
 * rule. Force-hide here so both Start over and Next can be cleanly
 * hidden via the `hidden` attribute. */
body.btf-pf-page .btf-pf-replay-controls button[hidden],
body.btf-pf-page .btf-pf-drill-foot button[hidden] { display: none; }
body.btf-pf-page .btf-pf-replay-controls .btn-ghost:hover {
	background: rgba( 28, 24, 20, .04 );
	border-color: var( --btf-pf-ink-2 );
	color: var( --btf-pf-ink );
}
body.btf-pf-page .btf-pf-replay-controls .btn-ghost:disabled {
	opacity: .45;
	cursor: not-allowed;
}
/* Kill the hover lift on buttons inside the replay panel — they're action
 * controls inside a widget, not standalone CTAs; the float feels jumpy. */
body.btf-pf-page .btf-pf-replay-controls .btn-primary:hover,
body.btf-pf-page .btf-pf-replay-controls .btn-ghost:hover {
	transform: none;
	box-shadow: none;
}
body.btf-pf-page .btf-pf-progress {
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --btf-pf-muted );
}
body.btf-pf-page .btf-pf-progress b {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1rem;
	color: var( --btf-pf-ink );
}

/* ── Callouts (tip / pro / pitfall) ──────────────────────────────────── */
/* `:not([hidden])` so an empty `<div class="btf-pf-callout" hidden>` (e.g.
 * the showdown panel that only shows on the river) doesn't render as a
 * visible empty bordered box — `display: flex` would otherwise win over
 * the UA's `[hidden] { display: none }` rule. */
body.btf-pf-page .btf-pf-callout:not([hidden]) {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.2rem;
	margin: 1.4rem 0 0;
	border-radius: 10px;
	border: 1px solid;
	align-items: flex-start;
}
body.btf-pf-page .btf-pf-callout.tip {
	background: rgba( 217, 228, 210, .35 );
	border-color: rgba( 45, 74, 42, .15 );
	color: var( --th-tip-ink );
}
/* Pro = "right answer" or "rule to follow" — readable mint-green so the
 * feedback matches the option dots (correct picks dot is forest green).
 * Dark forest at low alpha on cream just reads as gray; use a clean
 * mint tint that's actually green to the eye. */
body.btf-pf-page .btf-pf-callout.pro {
	background: #dcebdf;
	border-color: var( --btf-pf-forest );
	color: var( --btf-pf-forest );
}
body.btf-pf-page .btf-pf-callout.pro .btf-pf-callout-icon {
	background: rgba( 29, 52, 38, .18 );
	color: var( --btf-pf-forest );
}
/* Pitfall = "wrong answer" or "trap to avoid" — clear red. */
body.btf-pf-page .btf-pf-callout.pitfall {
	background: #f5dcdc;
	border-color: var( --btf-pf-red );
	color: var( --btf-pf-red );
}
body.btf-pf-page .btf-pf-callout.pitfall .btf-pf-callout-icon {
	background: rgba( 139, 45, 45, .18 );
	color: var( --btf-pf-red );
}
body.btf-pf-page .btf-pf-callout-icon {
	flex-shrink: 0;
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .25em .55em;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .08 );
	margin-top: .15em;
}
body.btf-pf-page .btf-pf-callout > span:last-child {
	font-family: var( --btf-pf-serif );
	font-size: 1.02rem;
	line-height: 1.55;
}

/* ── Three-callout grid (semibluff) ──────────────────────────────────── */
body.btf-pf-page .btf-pf-callouts {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .8rem;
	margin: 1.4rem 0 0;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-callouts { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-callout-tile {
	padding: 1.3rem 1.4rem;
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 12px;
}
body.btf-pf-page .btf-pf-callout-num {
	font-family: var( --btf-pf-serif );
	font-size: 3rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var( --btf-pf-forest );
	display: block;
	margin-bottom: .2em;
}
body.btf-pf-page .btf-pf-callout-tile .btf-th-eyebrow {
	display: flex;
	margin: .4em 0 .5em;
}
body.btf-pf-page .prose .btf-pf-callout-tile p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var( --btf-pf-ink-2 );
}

/* ── Two-column cards (rivertrap) ────────────────────────────────────── */
body.btf-pf-page .btf-pf-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1.4rem 0 0;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-twocol { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-twocol-card {
	padding: 1.5rem 1.6rem;
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 12px;
}
body.btf-pf-page .btf-pf-twocol-h {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.25rem;
	margin: .35em 0 .6em;
	letter-spacing: -.01em;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .prose .btf-pf-twocol-card p {
	margin: 0;
	font-size: .98rem;
	line-height: 1.6;
	color: var( --btf-pf-ink-2 );
}

/* ── Check-rows table (checkturn) ────────────────────────────────────── */
body.btf-pf-page .btf-pf-checks {
	margin: 1.4rem 0 0;
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 14px;
	overflow: hidden;
}
body.btf-pf-page .btf-pf-check-row {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.2rem;
	padding: 1rem 1.4rem;
	border-bottom: 1px solid var( --btf-pf-hair );
	align-items: baseline;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-check-row {
		grid-template-columns: 1fr;
		gap: .2rem;
		padding: .9rem 1.1rem;
	}
}
body.btf-pf-page .btf-pf-check-row:last-child { border-bottom: 0; }
body.btf-pf-page .btf-pf-check-cond {
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --btf-pf-muted );
}
body.btf-pf-page .btf-pf-check-val {
	font-family: var( --btf-pf-serif );
	font-size: 1.1rem;
	line-height: 1.4;
	color: var( --btf-pf-ink );
}

/* ── Drill ───────────────────────────────────────────────────────────── */
body.btf-pf-page .btf-pf-drill {
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-radius: 14px;
	padding: 1.5rem 1.6rem;
}
body.btf-pf-page .btf-pf-drill-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --btf-pf-hair );
	margin-bottom: 1.2rem;
	flex-wrap: wrap;
}
body.btf-pf-page .btf-pf-drill-head .btf-th-eyebrow {
	display: flex;
	margin: 0;
}
body.btf-pf-page .btf-pf-drill-head .btf-th-eyebrow b {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	color: var( --btf-pf-ink );
	margin-right: .15em;
}
body.btf-pf-page .btf-pf-drill-pot {
	font-family: var( --btf-pf-mono );
	font-size: .78rem;
	letter-spacing: .1em;
	color: var( --btf-pf-ink-2 );
}
body.btf-pf-page .btf-pf-score {
	margin-left: auto;
	font-family: var( --btf-pf-mono );
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --btf-pf-ink-2 );
}
body.btf-pf-page .btf-pf-score b {
	font-family: var( --btf-pf-serif );
	font-size: 1.2rem;
	color: var( --btf-pf-forest );
}

body.btf-pf-page .btf-pf-drill-table {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 1.2rem;
	padding: 1.2rem;
	background: var( --btf-pf-cream-3 );
	border-radius: 10px;
	margin-bottom: 1.1rem;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-drill-table { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-drill-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}
body.btf-pf-page .btf-pf-drill-cards {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	justify-content: center;
}

body.btf-pf-page .prose .btf-pf-drill-sit {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --btf-pf-ink );
	text-wrap: pretty;
}
body.btf-pf-page .btf-pf-drill-opts {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .55rem;
	margin-bottom: 1rem;
}
@media ( max-width: 760px ) {
	body.btf-pf-page .btf-pf-drill-opts { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-drill-result {
	margin-bottom: 1rem;
}
body.btf-pf-page .btf-pf-drill-result.show {
	display: block;
}

body.btf-pf-page .btf-pf-drill-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid var( --btf-pf-hair );
	gap: .8rem;
}
/* Reset is a tertiary action inside the drill — same quiet treatment as
 * Restart inside the replay panel. Hover-lift killed too. */
body.btf-pf-page .btf-pf-drill-foot .btn-ghost {
	background: transparent;
	border-color: rgba( 28, 24, 20, .18 );
	color: var( --btf-pf-ink-2 );
	font-weight: 500;
}
body.btf-pf-page .btf-pf-drill-foot .btn-ghost:hover {
	background: rgba( 28, 24, 20, .04 );
	border-color: var( --btf-pf-ink-2 );
	color: var( --btf-pf-ink );
}
body.btf-pf-page .btf-pf-drill-foot .btn-ghost:disabled,
body.btf-pf-page .btf-pf-drill-foot .btn-primary:disabled {
	opacity: .45;
	cursor: not-allowed;
}
body.btf-pf-page .btf-pf-drill-foot .btn-primary:hover,
body.btf-pf-page .btf-pf-drill-foot .btn-ghost:hover {
	transform: none;
	box-shadow: none;
}
body.btf-pf-page .btf-pf-drill-foot button[hidden] { display: none; }

/* ── Decision result panels (replays) ────────────────────────────────── */
/* `:not([hidden])` is critical — without it our `display: flex` overrides
 * the browser's UA `[hidden] { display: none }` rule and the empty result
 * box renders as a visible bordered div before the user picks anything. */
body.btf-pf-page .btf-pf-decision-result:not([hidden]) {
	margin-top: 1rem;
	padding: 1rem 1.2rem;
	border-radius: 10px;
	border: 1px solid;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
body.btf-pf-page .btf-pf-decision-result.pro {
	background: #dcebdf;
	border-color: var( --btf-pf-forest );
}
body.btf-pf-page .btf-pf-decision-result.pro .btf-pf-decision-result-icon {
	background: rgba( 29, 52, 38, .18 );
	color: var( --btf-pf-forest );
}
body.btf-pf-page .btf-pf-decision-result.pitfall {
	background: #f5dcdc;
	border-color: var( --btf-pf-red );
}
body.btf-pf-page .btf-pf-decision-result.pitfall .btf-pf-decision-result-icon {
	background: rgba( 139, 45, 45, .18 );
	color: var( --btf-pf-red );
}
body.btf-pf-page .btf-pf-decision-result-icon {
	flex-shrink: 0;
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .25em .55em;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .08 );
	margin-top: .15em;
}
body.btf-pf-page .btf-pf-decision-result-text {
	font-family: var( --btf-pf-serif );
	font-size: 1.02rem;
	line-height: 1.55;
	color: var( --btf-pf-ink );
}

/* ── Postflop leaks list ─────────────────────────────────────────────── */
body.btf-pf-page .btf-pf-leaks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
body.btf-pf-page .btf-pf-leak {
	background: var( --btf-pf-cream-2 );
	border: 1px solid var( --btf-pf-hair );
	border-left: 4px solid var( --btf-pf-muted );
	border-radius: 10px;
	padding: 1.05rem 1.2rem 1.1rem;
}
body.btf-pf-page .btf-pf-leak--expensive { border-left-color: var( --btf-pf-red ); }
body.btf-pf-page .btf-pf-leak--costly    { border-left-color: var( --btf-pf-gold ); }
body.btf-pf-page .btf-pf-leak--sneaky    { border-left-color: var( --btf-pf-forest ); }

body.btf-pf-page .btf-pf-leak-head {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: baseline;
	gap: .9rem;
	margin-bottom: .35rem;
}
@media ( max-width: 640px ) {
	body.btf-pf-page .btf-pf-leak-head {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"num title pill"
			"num title cost";
		gap: .35rem .7rem;
	}
	body.btf-pf-page .btf-pf-leak-num   { grid-area: num; }
	body.btf-pf-page .btf-pf-leak-title { grid-area: title; }
	body.btf-pf-page .btf-pf-leak-tier-pill { grid-area: pill; }
	body.btf-pf-page .btf-pf-leak-cost  { grid-area: cost; }
}
body.btf-pf-page .btf-pf-leak-num {
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	letter-spacing: .14em;
	color: var( --btf-pf-muted );
	font-weight: 600;
}
body.btf-pf-page .btf-pf-leak-title {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0;
	color: var( --btf-pf-ink );
}
body.btf-pf-page .btf-pf-leak-tier-pill {
	font-family: var( --btf-pf-mono );
	font-size: .58rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .25em .55em;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .06 );
	color: var( --btf-pf-ink-2 );
}
body.btf-pf-page .btf-pf-leak-tier-pill--expensive { background: rgba( 139, 45, 45, .14 ); color: var( --btf-pf-red ); }
body.btf-pf-page .btf-pf-leak-tier-pill--costly    { background: rgba( 154, 123, 60, .18 ); color: var( --btf-pf-gold ); }
body.btf-pf-page .btf-pf-leak-tier-pill--sneaky    { background: rgba( 27, 58, 45, .12 );   color: var( --btf-pf-forest ); }
body.btf-pf-page .btf-pf-leak-cost {
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	color: var( --btf-pf-ink-2 );
	white-space: nowrap;
}
body.btf-pf-page .prose .btf-pf-leak-desc,
body.btf-pf-page .btf-pf-leak-desc {
	margin: .25rem 0 0;
	padding-left: 1.85rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var( --btf-pf-ink-2 );
}
@media ( max-width: 640px ) {
	body.btf-pf-page .prose .btf-pf-leak-desc,
	body.btf-pf-page .btf-pf-leak-desc {
		padding-left: 0;
	}
}

/* ── Summary felt panel ──────────────────────────────────────────────── */
body.btf-pf-page .btf-pf-summary {
	background: var( --btf-pf-forest );
	color: var( --btf-pf-cream );
	padding: 4rem 0 5rem;
}
body.btf-pf-page .btf-pf-sm-eyebrow {
	font-family: var( --btf-pf-mono );
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --btf-pf-gold-soft );
	display: block;
	margin-bottom: 1rem;
}
body.btf-pf-page .btf-pf-sm-display {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: clamp( 2rem, 4.2vw, 3.4rem );
	line-height: 1.05;
	letter-spacing: -.015em;
	color: var( --btf-pf-cream );
	margin: .4em 0 .8em;
}
body.btf-pf-page .btf-pf-sm-display em {
	color: var( --btf-pf-gold-soft );
	font-style: italic;
}
body.btf-pf-page .btf-pf-sm-steps {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 1.2rem;
	margin-top: 2.5rem;
}
@media ( max-width: 1080px ) {
	body.btf-pf-page .btf-pf-sm-steps { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 600px ) {
	body.btf-pf-page .btf-pf-sm-steps { grid-template-columns: 1fr; }
}
body.btf-pf-page .btf-pf-sm-step {
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 12px;
	padding: 1.4rem 1.5rem 1.5rem;
}
body.btf-pf-page .btf-pf-sm-num {
	font-family: var( --btf-pf-mono );
	font-size: .7rem;
	letter-spacing: .16em;
	color: var( --btf-pf-gold-soft );
	display: block;
	margin-bottom: .4rem;
}
body.btf-pf-page .btf-pf-sm-step h4 {
	font-family: var( --btf-pf-serif );
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 .5em;
	color: var( --btf-pf-cream );
}
body.btf-pf-page .prose .btf-pf-sm-step p,
body.btf-pf-page .btf-pf-sm-step p {
	font-size: .92rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .82 );
	margin: 0;
}