/**
 * bankroll-page.css
 *
 * Editorial styling for /poker/strategy/bankroll-management/.
 * Layered on top of texas-holdem.css. All selectors scoped under
 * `body.btf-br-page` so they don't leak. Mobile-first.
 */

/* ── Section header spacing — same fix as hand-rankings page. */
body.btf-br-page .btf-th-section-h { margin-bottom: 1.5rem; }
body.btf-br-page .btf-th-summary .btf-th-eyebrow {
	display: inline-flex;
	margin-bottom: .9em;
}

/* Specificity bump — `body.btf-th-page .prose p { margin: 0 }` in
   texas-holdem.css beats single-class selectors here. */
body.btf-br-page .prose .btf-br-widget-lede,
body.btf-br-page .prose .btf-br-fmt-desc p,
body.btf-br-page .prose .btf-br-fmt-tier p,
body.btf-br-page .prose .btf-br-leak-desc,
body.btf-br-page .prose .btf-br-shot-card p,
body.btf-br-page .prose .btf-br-quiz-q,
body.btf-br-page .prose .btf-br-quiz-explain,
body.btf-br-page .prose .btf-br-hero-quote blockquote {
	margin: 0;
}
body.btf-br-page .prose .btf-br-fmt-desc p { margin-top: .5em; }
body.btf-br-page .prose .btf-br-quiz-q     { margin: .5rem 0 1rem; }
body.btf-br-page .prose .btf-br-quiz-explain { margin-bottom: .8rem; }
body.btf-br-page .prose .btf-br-leak-desc   { margin-top: .5rem; }

/* ── Add visual variables this page needs that texas-holdem.css doesn't ── */
body.btf-br-page {
	--th-red-soft: #c25a47;
}

/* Text selection on every felt-/forest-coloured surface — matches
   the existing rule in texas-holdem.css for the th-hero/summary etc.,
   extended to every dark-background element introduced on this
   page. Default selection uses dark ink on yellow which goes
   invisible against the green felt. */
body.btf-br-page .btf-br-hero-quote ::selection,
body.btf-br-page .btf-br-hero-quote::selection,
body.btf-br-page .btf-br-fmt-tier--standard ::selection,
body.btf-br-page .btf-br-fmt-tier--standard::selection,
body.btf-br-page .btf-br-bc-result ::selection,
body.btf-br-page .btf-br-bc-result::selection,
body.btf-br-page .btf-br-var-chart ::selection,
body.btf-br-page .btf-br-var-chart::selection,
body.btf-br-page .btf-br-shot-card:hover ::selection,
body.btf-br-page .btf-br-shot-card:hover::selection,
body.btf-br-page .btf-br-sf-stage[data-state="home"] ::selection,
body.btf-br-page .btf-br-sf-stage[data-state="home"]::selection,
body.btf-br-page .btf-br-sf-stage[data-state="shot"] ::selection,
body.btf-br-page .btf-br-sf-stage[data-state="shot"]::selection {
	background: rgba( 212, 180, 74, .4 );
	color: var( --on-dark, var( --th-cream ) );
}


/* ── SSR fallback styling ────────────────────────────────────────
   Each btf-br-* widget renders its full data set server-side as a
   static fallback for crawlers + JS-disabled readers. The JS
   hydrator wipes [data-br-widget] on mount and replaces it with the
   interactive widget — these styles only matter pre-hydration and
   for non-rendering clients. */

/* Format picker SSR — render all 4 formats stacked. */
body.btf-br-page .btf-br-formats-static {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
body.btf-br-page .btf-br-formats-static-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var( --th-hair );
	flex-wrap: wrap;
}
body.btf-br-page .btf-br-formats-static-name {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	color: var( --th-ink );
	margin: 0;
}
body.btf-br-page .btf-br-formats-static-mult {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin-left: auto;
}

/* Quiz SSR — render every Q+A as a FAQ list. */
body.btf-br-page .btf-br-quiz-static-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
body.btf-br-page .btf-br-quiz-static-item {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 12px;
	padding: 1.2rem 1.4rem;
}
body.btf-br-page .btf-br-quiz-static-q {
	font-family: var( --th-serif );
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: -.01em;
	margin: 0 0 .6rem;
	color: var( --th-ink );
	line-height: 1.3;
}
body.btf-br-page .btf-br-quiz-static-answer {
	display: flex;
	gap: .7rem;
	align-items: baseline;
	margin-bottom: .5rem;
	flex-wrap: wrap;
}
body.btf-br-page .btf-br-quiz-static-tag {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-tip-ink );
	background: var( --th-tip );
	padding: .2em .5em;
	border-radius: 3px;
	font-weight: 700;
}
body.btf-br-page .btf-br-quiz-static-name {
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 500;
	color: var( --th-ink );
}
body.btf-br-page .btf-br-quiz-static-explain {
	font-size: .92rem;
	color: var( --th-ink-2 );
	line-height: 1.55;
}
body.btf-br-page .prose .btf-br-quiz-static-explain { margin: 0; }


/* ── Hero stats + sparkline ──────────────────────────────────────── */
body.btf-br-page .btf-br-hero .btf-th-hero-body {
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media ( min-width: 900px ) {
	body.btf-br-page .btf-br-hero .btf-th-hero-body {
		grid-template-columns: 1.1fr 1fr;
		gap: 2.5rem;
	}
}

body.btf-br-page .btf-br-hero-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .6rem;
	margin-top: 2rem;
	max-width: 480px;
}
body.btf-br-page .btf-br-hero-stats > div {
	background: rgba( 243, 238, 226, .06 );
	border: 1px solid rgba( 243, 238, 226, .1 );
	border-radius: 10px;
	padding: .9rem 1rem;
}
body.btf-br-page .btf-br-hero-stats b {
	display: block;
	font-family: var( --th-serif );
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: -.02em;
	color: var( --th-gold-soft );
	line-height: 1;
	margin-bottom: .3em;
}
body.btf-br-page .btf-br-hero-stats span {
	font-family: var( --th-mono );
	font-size: .65rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
}
@media ( min-width: 700px ) {
	body.btf-br-page .btf-br-hero-stats b { font-size: 1.8rem; }
}

body.btf-br-page .btf-br-hero-quote {
	position: relative;
	padding: 2.4rem 2rem 1.6rem 2.6rem;
	border-radius: var( --th-radius-lg );
	border: 1px solid rgba( 243, 238, 226, .12 );
	border-left: 3px solid var( --th-gold-soft );
	background: linear-gradient( 160deg, rgba( 0, 0, 0, .12 ), rgba( 0, 0, 0, .22 ) );
	color: var( --on-dark, var( --th-cream ) );
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
body.btf-br-page .btf-br-hero-quote-mark {
	position: absolute;
	top: .35rem;
	left: 1.1rem;
	font-family: var( --th-serif );
	font-size: 4rem;
	line-height: 1;
	color: var( --th-gold-soft );
	opacity: .85;
	pointer-events: none;
}
body.btf-br-page .btf-br-hero-quote blockquote {
	font-family: var( --th-serif );
	font-weight: 300;
	font-size: clamp( 1.2rem, 1.7vw, 1.55rem );
	line-height: 1.4;
	letter-spacing: -.005em;
	color: inherit;
}
/* Highlighted phrases inside the quote: gold tone, no underline.
   Authors wrap the phrase in <u>...</u> in the editor. */
body.btf-br-page .btf-br-hero-quote blockquote u {
	color: var( --th-gold-soft );
	text-decoration: none;
}
body.btf-br-page .btf-br-hero-quote-kicker {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-gold-soft );
	font-weight: 600;
	padding-top: 1.1rem;
	border-top: 1px solid rgba( 243, 238, 226, .15 );
}
@media ( min-width: 900px ) {
	body.btf-br-page .btf-br-hero-quote {
		padding: 2.6rem 2rem 1.8rem 3rem;
	}
}


/* ── Generic widget pieces ───────────────────────────────────────── */
body.btf-br-page .btf-br-widget-lede {
	margin: 0 0 1.4rem;
	color: var( --th-ink-2 );
	font-size: .95rem;
	line-height: 1.5;
	max-width: 62ch;
}

body.btf-br-page .btf-br-callout {
	border-radius: 10px;
	padding: .85rem 1rem;
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	font-size: .92rem;
	line-height: 1.5;
}
body.btf-br-page .btf-br-callout--tip {
	background: var( --th-tip );
	color: var( --th-tip-ink );
}
body.btf-br-page .btf-br-callout--pro {
	background: var( --th-pro );
	color: var( --th-pro-ink );
}
body.btf-br-page .btf-br-callout-tag {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	font-weight: 700;
	padding: .25rem .5rem;
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: .15em;
}
body.btf-br-page .btf-br-callout--tip .btf-br-callout-tag {
	background: var( --th-tip-ink );
	color: var( --th-tip );
}
body.btf-br-page .btf-br-callout--pro .btf-br-callout-tag {
	background: var( --th-pro-ink );
	color: var( --th-pro );
}


/* ── Format Picker ───────────────────────────────────────────────── */
body.btf-br-page .btf-br-fmt-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-bottom: 1.4rem;
}
@media ( min-width: 760px ) {
	body.btf-br-page .btf-br-fmt-tabs { grid-template-columns: repeat( 4, 1fr ); }
}
body.btf-br-page .btf-br-fmt-tab {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 10px;
	padding: 1rem 1.1rem;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background .15s, color .15s;
	display: flex;
	flex-direction: column;
	gap: .25em;
	color: var( --th-ink );
	font: inherit;
}
body.btf-br-page .btf-br-fmt-tab:hover { border-color: var( --th-forest ); }
body.btf-br-page .btf-br-fmt-tab.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-br-page .btf-br-fmt-tab b {
	font-family: var( --th-serif );
	font-weight: 500;
	font-size: 1.15rem;
	letter-spacing: -.01em;
}
body.btf-br-page .btf-br-fmt-tab span {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-br-page .btf-br-fmt-tab.is-active span { color: var( --th-gold-soft ); }

body.btf-br-page .btf-br-fmt-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}
@media ( min-width: 900px ) {
	body.btf-br-page .btf-br-fmt-detail { grid-template-columns: 1fr 1.1fr; }
}
body.btf-br-page .btf-br-fmt-desc {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
body.btf-br-page .btf-br-fmt-desc p {
	font-family: var( --th-serif );
	font-size: 1.05rem;
	line-height: 1.55;
	font-weight: 400;
	color: var( --th-ink );
}

body.btf-br-page .btf-br-fmt-numbers {
	display: grid;
	grid-template-columns: 1fr;
	gap: .6rem;
}
body.btf-br-page .btf-br-fmt-tier {
	padding: 1.2rem 1.4rem;
	border-radius: 12px;
	border: 1px solid var( --th-hair );
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 1.1rem;
	align-items: center;
}
body.btf-br-page .btf-br-fmt-lbl {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
	white-space: nowrap;
	min-width: 5.5em;
}
body.btf-br-page .btf-br-fmt-big {
	font-family: var( --th-serif );
	font-size: 2.2rem;
	line-height: 1;
	font-weight: 300;
	letter-spacing: -.02em;
	color: var( --th-ink );
	display: flex;
	align-items: center;
	gap: .5em;
	white-space: nowrap;
}
body.btf-br-page .btf-br-fmt-big small {
	font-family: var( --th-mono );
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --th-muted );
	font-weight: 500;
}
body.btf-br-page .btf-br-fmt-tier p {
	font-size: .88rem;
	color: var( --th-ink-2 );
	line-height: 1.5;
}
body.btf-br-page .btf-br-fmt-tier--conservative {
	background: #e8eddf;
	border-color: #a8b89a;
}
body.btf-br-page .btf-br-fmt-tier--standard {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-br-page .btf-br-fmt-tier--standard .btf-br-fmt-lbl { color: var( --th-gold-soft ); }
body.btf-br-page .btf-br-fmt-tier--standard .btf-br-fmt-big { color: var( --th-cream ); }
body.btf-br-page .btf-br-fmt-tier--standard .btf-br-fmt-big small { color: var( --th-gold-soft ); }
body.btf-br-page .btf-br-fmt-tier--standard p,
body.btf-br-page .prose .btf-br-fmt-tier--standard p { color: rgba( 243, 238, 226, .92 ); }
body.btf-br-page .btf-br-fmt-tier--aggressive {
	background: #f0d7c8;
	border-color: #c2917a;
}


/* ── Bankroll Calculator ─────────────────────────────────────────── */
body.btf-br-page .btf-br-calc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media ( min-width: 900px ) {
	body.btf-br-page .btf-br-calc { grid-template-columns: 1fr 1.4fr; align-items: stretch; }
}
body.btf-br-page .btf-br-calc-inputs {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1.5rem;
}
body.btf-br-page .btf-br-bc-input { display: flex; flex-direction: column; gap: .4rem; }
body.btf-br-page .btf-br-bc-input label {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
body.btf-br-page .btf-br-hint {
	font-family: var( --th-mono );
	font-size: .68rem;
	color: var( --th-muted );
	opacity: .7;
	text-transform: none;
	letter-spacing: .04em;
}
/* Inputs: no chip / box. Big editorial numbers. A subtle dashed
   bottom-border appears on hover/focus so it's clear they're
   editable, but the resting state is just text. */
body.btf-br-page .btf-br-numwrap {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	padding: .35rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px dashed transparent;
	transition: border-bottom-color .15s;
	cursor: text;
}
body.btf-br-page .btf-br-numwrap:hover         { border-bottom-color: var( --th-muted ); }
body.btf-br-page .btf-br-numwrap:focus-within {
	border-bottom-color: var( --th-forest );
	border-bottom-style: solid;
}
body.btf-br-page .btf-br-currency {
	font-family: var( --th-serif );
	font-size: 1.6rem;
	color: var( --th-muted );
	font-weight: 300;
	line-height: 1;
}
body.btf-br-page .btf-br-numwrap input[type=number] {
	border: 0;
	background: transparent;
	font: 300 2.4rem/1 var( --th-serif );
	width: 100%;
	color: var( --th-ink );
	outline: none;
	letter-spacing: -.03em;
	padding: 0;
	-moz-appearance: textfield;
}
body.btf-br-page .btf-br-numwrap input[type=number]::-webkit-outer-spin-button,
body.btf-br-page .btf-br-numwrap input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Variance simulator's bb/100 + hands inputs sit alongside a unit
   suffix — keep them sized for the suffix to stay on the same line. */
body.btf-br-page .btf-br-var-controls .btf-br-numwrap input[type=number] { font-size: 2rem; }
body.btf-br-page .btf-br-var-controls .btf-br-currency { font-size: 1.05rem; align-self: end; padding-bottom: .35rem; }
body.btf-br-page .btf-br-slider {
	width: 100%;
	margin-top: .4rem;
	accent-color: var( --th-forest );
}
body.btf-br-page .btf-br-presets {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}
body.btf-br-page .btf-br-presets button {
	font-family: var( --th-mono );
	font-size: .72rem;
	padding: .35rem .6rem;
	background: transparent;
	border: 1px solid var( --th-hair );
	border-radius: 4px;
	cursor: pointer;
	color: var( --th-muted );
	letter-spacing: .04em;
	transition: color .15s, border-color .15s, background .15s;
}
body.btf-br-page .btf-br-presets button:hover {
	color: var( --th-ink );
	border-color: var( --th-ink );
}
body.btf-br-page .btf-br-presets button.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}

body.btf-br-page .btf-br-calc-fmts { display: flex; flex-direction: column; gap: .4rem; }
body.btf-br-page .btf-br-calc-fmts button {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 8px;
	padding: .7rem .9rem;
	cursor: pointer;
	font: inherit;
	color: var( --th-ink );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6em;
	text-align: left;
	transition: background .15s, color .15s, border-color .15s;
}
body.btf-br-page .btf-br-calc-fmts button:hover { border-color: var( --th-forest ); }
body.btf-br-page .btf-br-calc-fmts button.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-br-page .btf-br-calc-fmts button b {
	font-family: var( --th-serif );
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: -.01em;
}
body.btf-br-page .btf-br-calc-fmts button small {
	font-family: var( --th-mono );
	font-size: .65rem;
	letter-spacing: .08em;
	color: var( --th-muted );
	text-transform: uppercase;
	white-space: nowrap;
}
body.btf-br-page .btf-br-calc-fmts button.is-active small { color: var( --th-gold-soft ); }

body.btf-br-page .btf-br-bc-result {
	background: linear-gradient( 135deg, var( --th-forest ), var( --th-forest-2 ) );
	color: var( --th-cream );
	padding: 1.3rem;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-top: auto;
}
body.btf-br-page .btf-br-bc-lbl {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-gold-soft );
}
body.btf-br-page .btf-br-bc-big {
	font-family: var( --th-serif );
	font-size: 2.4rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
	color: var( --th-cream );
}
body.btf-br-page .btf-br-bc-ratio {
	font-size: .92rem;
	line-height: 1.5;
	color: rgba( 243, 238, 226, .85 );
}
body.btf-br-page .btf-br-bc-ratio b { color: var( --th-gold-soft ); font-weight: 600; }
body.btf-br-page .btf-br-bc-verdict {
	font-size: .92rem;
	line-height: 1.5;
	color: rgba( 243, 238, 226, .85 );
	padding-top: .8rem;
	border-top: 1px solid rgba( 243, 238, 226, .15 );
}
body.btf-br-page .btf-br-bc-verdict b {
	color: var( --th-gold-soft );
	font-family: var( --th-mono );
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .3em;
	font-weight: 600;
}

body.btf-br-page .btf-br-calc-ladder {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1rem 1.2rem;
	overflow: hidden;
}
body.btf-br-page .btf-br-ladder-head {
	display: grid;
	grid-template-columns: 1.4fr .8fr 1fr 1.6fr;
	gap: .8rem;
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	padding: .5rem 0 .8rem;
	border-bottom: 1px solid var( --th-hair );
}
body.btf-br-page .btf-br-bl-row {
	display: grid;
	grid-template-columns: 1.4fr .8fr 1fr 1.6fr;
	gap: .8rem;
	padding: .7rem 0;
	border-bottom: 1px solid var( --th-hair );
	align-items: center;
}
body.btf-br-page .btf-br-bl-row:last-child { border-bottom: 0; }
body.btf-br-page .btf-br-bl-row.is-no { opacity: .4; }
body.btf-br-page .btf-br-bl-row.is-shot { background: rgba( 201, 162, 74, .06 ); }
body.btf-br-page .btf-br-bl-name {
	font-family: var( --th-serif );
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var( --th-ink );
}
body.btf-br-page .btf-br-bl-name small {
	display: block;
	font-family: var( --th-mono );
	font-size: .68rem;
	color: var( --th-muted );
	font-weight: 400;
	margin-top: .2em;
	letter-spacing: .04em;
}
body.btf-br-page .btf-br-bl-bi,
body.btf-br-page .btf-br-bl-need {
	font-family: var( --th-mono );
	font-size: .82rem;
	color: var( --th-ink-2 );
}
body.btf-br-page .btf-br-bl-have {
	display: flex;
	align-items: center;
	gap: .6rem;
}
body.btf-br-page .btf-br-bl-bar {
	flex: 1;
	height: 8px;
	background: var( --th-cream-3 );
	border-radius: 4px;
	overflow: hidden;
}
body.btf-br-page .btf-br-bl-bar span {
	display: block;
	height: 100%;
	background: var( --th-cream-3 );
	transition: width .25s ease;
}
body.btf-br-page .btf-br-bl-row.is-ok   .btf-br-bl-bar span { background: linear-gradient( 90deg, var( --th-forest ), #3d7a3d ); }
body.btf-br-page .btf-br-bl-row.is-shot .btf-br-bl-bar span { background: linear-gradient( 90deg, var( --th-gold ), var( --th-gold-soft ) ); }
body.btf-br-page .btf-br-bl-row.is-no   .btf-br-bl-bar span { background: var( --th-cream-3 ); }
body.btf-br-page .btf-br-bl-bi-count {
	font-family: var( --th-mono );
	font-size: .75rem;
	color: var( --th-ink-2 );
	min-width: 4.5em;
	text-align: right;
	letter-spacing: .04em;
}


/* ── Variance Simulator ──────────────────────────────────────────── */
body.btf-br-page .btf-br-var {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media ( min-width: 900px ) {
	body.btf-br-page .btf-br-var { grid-template-columns: 1fr 1.5fr; align-items: stretch; }
}
body.btf-br-page .btf-br-var-controls {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1.5rem;
}
body.btf-br-page .btf-br-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	background: transparent;
	color: var( --th-ink );
	border: 1px solid var( --th-hair );
	border-radius: 6px;
	font: 500 .82rem/1 var( --th-mono );
	letter-spacing: .04em;
	cursor: pointer;
	align-self: flex-start;
	transition: background .15s, border-color .15s;
}
body.btf-br-page .btf-br-btn-ghost:hover { background: var( --th-cream-3 ); border-color: var( --th-ink-2 ); }
body.btf-br-page .btf-br-var-chart {
	background: linear-gradient( 160deg, var( --th-forest ), var( --th-forest-2 ) );
	color: var( --th-cream );
	border-radius: 14px;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
	overflow: hidden;
}
body.btf-br-page .btf-br-var-legend {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
}
body.btf-br-page .btf-br-var-legend-lbl {
	color: var( --th-gold-soft );
	font-weight: 600;
	display: block;
	margin-bottom: .2em;
}
body.btf-br-page .btf-br-var-legend > div > span:not(.btf-br-var-legend-lbl) {
	display: block;
	font-family: var( --th-sans );
	font-size: .78rem;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba( 243, 238, 226, .6 );
}
body.btf-br-page .btf-br-var-svg {
	width: 100%;
	height: auto;
	display: block;
	background: rgba( 0, 0, 0, .15 );
	border-radius: 8px;
}
body.btf-br-page .btf-br-var-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: .8rem;
}
body.btf-br-page .btf-br-var-stat {
	padding: .85rem 1rem;
	background: rgba( 243, 238, 226, .06 );
	border-radius: 8px;
	min-height: 5.5em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.btf-br-page .btf-br-var-stat span {
	font-family: var( --th-mono );
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
	display: block;
	margin-bottom: .5em;
	line-height: 1.3;
}
body.btf-br-page .btf-br-var-stat b {
	font-family: var( --th-serif );
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var( --th-cream );
	display: block;
}
body.btf-br-page .btf-br-var-takeaway {
	padding: 1rem 1.2rem;
	background: rgba( 243, 238, 226, .06 );
	border-radius: 8px;
	font-size: .92rem;
	line-height: 1.55;
	color: rgba( 243, 238, 226, .85 );
}
body.btf-br-page .btf-br-var-takeaway b {
	color: var( --th-gold-soft );
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .4em;
	font-weight: 600;
}


/* ── Shot Taking Cards + Flow Diagram ────────────────────────────── */
body.btf-br-page .btf-br-shot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .8rem;
}
@media ( min-width: 760px ) {
	body.btf-br-page .btf-br-shot-grid { grid-template-columns: repeat( 2, 1fr ); }
}
body.btf-br-page .btf-br-shot-card {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 12px;
	padding: 1.4rem 1.5rem;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
body.btf-br-page .btf-br-shot-card:hover {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
	transform: translateY( -2px );
}
body.btf-br-page .btf-br-shot-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .7em;
}
body.btf-br-page .btf-br-shot-num {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	color: var( --th-muted );
}
body.btf-br-page .btf-br-shot-card:hover .btf-br-shot-num { color: var( --th-gold-soft ); }
body.btf-br-page .btf-br-shot-icon {
	font-family: var( --th-serif );
	font-size: 1.5rem;
	color: var( --th-forest );
	opacity: .4;
}
body.btf-br-page .btf-br-shot-card:hover .btf-br-shot-icon { color: var( --th-gold-soft ); opacity: 1; }
body.btf-br-page .btf-br-shot-card h4 {
	font-family: var( --th-serif );
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0 0 .4em;
	letter-spacing: -.01em;
	color: inherit;
}
body.btf-br-page .btf-br-shot-card p {
	font-size: .92rem;
	color: var( --th-ink-2 );
	line-height: 1.55;
}
body.btf-br-page .btf-br-shot-card:hover p { color: rgba( 243, 238, 226, .8 ); }

body.btf-br-page .btf-br-shot-flow {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: var( --th-cream-3 );
	border-radius: 14px;
	display: grid;
	grid-template-columns: 1fr;
	gap: .8rem;
	align-items: center;
}
@media ( min-width: 760px ) {
	body.btf-br-page .btf-br-shot-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
}
body.btf-br-page .btf-br-sf-stage {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 10px;
	padding: 1rem 1.2rem;
	text-align: center;
}
body.btf-br-page .btf-br-sf-stage[data-state="home"] {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-br-page .btf-br-sf-stage[data-state="shot"] {
	background: var( --th-gold );
	color: var( --th-forest-2 );
	border-color: var( --th-gold );
}
body.btf-br-page .btf-br-sf-label {
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	display: block;
	opacity: .7;
	margin-bottom: .4em;
}
body.btf-br-page .btf-br-sf-num {
	font-family: var( --th-serif );
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -.01em;
}
body.btf-br-page .btf-br-sf-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2em;
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-br-page .btf-br-sf-arrow::before {
	content: "→";
	font-size: 1.4rem;
	color: var( --th-ink );
	font-family: var( --th-serif );
}
body.btf-br-page .btf-br-sf-arrow--up::before   { content: "↗"; color: var( --th-gold ); }
body.btf-br-page .btf-br-sf-arrow--down::before { content: "↘"; color: var( --th-red ); }
body.btf-br-page .btf-br-sf-tip {
	color: var( --th-ink-2 );
	text-transform: none;
	letter-spacing: 0;
	font-family: var( --th-sans );
	font-size: .75rem;
}
@media ( max-width: 759.98px ) {
	body.btf-br-page .btf-br-sf-arrow { transform: rotate( 90deg ); justify-self: center; }
}


/* ── Stop-loss Table ─────────────────────────────────────────────── */
body.btf-br-page .btf-br-stoploss {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	overflow: hidden;
}
body.btf-br-page .btf-br-sl-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: .4rem;
	padding: 1.1rem 1.4rem;
	border-bottom: 1px solid var( --th-hair );
}
body.btf-br-page .btf-br-sl-row:last-child { border-bottom: 0; }
body.btf-br-page .btf-br-sl-row:hover { background: var( --th-cream-3 ); }
body.btf-br-page .btf-br-sl-lbl {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-br-page .btf-br-sl-val {
	font-family: var( --th-serif );
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var( --th-forest );
}
body.btf-br-page .btf-br-sl-desc {
	font-size: .92rem;
	color: var( --th-ink-2 );
	line-height: 1.5;
}
@media ( min-width: 760px ) {
	body.btf-br-page .btf-br-sl-row {
		grid-template-columns: 1fr 1fr 2fr;
		gap: 1.2rem;
		align-items: center;
	}
}


/* ── Bankroll Leaks (compact ordered list with inline tier pill) ─── */
body.btf-br-page .btf-br-leaks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	overflow: hidden;
}
body.btf-br-page .btf-br-leak {
	display: block;
	padding: 1.1rem 1.4rem;
	border-bottom: 1px solid var( --th-hair );
	border-left: 3px solid transparent;
	transition: background .15s, border-left-color .15s;
}
body.btf-br-page .btf-br-leak:last-child { border-bottom: 0; }
body.btf-br-page .btf-br-leak:hover { background: var( --th-cream-3 ); }
body.btf-br-page .btf-br-leak--fatal  { border-left-color: #a8362b; }
body.btf-br-page .btf-br-leak--costly { border-left-color: var( --th-gold ); }
body.btf-br-page .btf-br-leak--sneaky { border-left-color: var( --th-ink-2 ); }

body.btf-br-page .btf-br-leak-head {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	column-gap: 1rem;
	row-gap: .35rem;
	align-items: center;
}
@media ( max-width: 759.98px ) {
	body.btf-br-page .btf-br-leak-head {
		grid-template-columns: auto 1fr;
	}
	body.btf-br-page .btf-br-leak-tier-pill,
	body.btf-br-page .btf-br-leak-cost {
		grid-column: 2;
		justify-self: start;
	}
}

body.btf-br-page .btf-br-leak-num {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .14em;
	color: var( --th-muted );
	font-weight: 600;
	min-width: 2em;
}
body.btf-br-page .btf-br-leak-title {
	font-family: var( --th-serif );
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: -.01em;
	margin: 0;
	color: var( --th-ink );
	line-height: 1.25;
}
body.btf-br-page .btf-br-leak-tier-pill {
	font-family: var( --th-mono );
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: .25em .6em;
	border-radius: 3px;
	white-space: nowrap;
}
body.btf-br-page .btf-br-leak-tier-pill--fatal  { background: rgba( 168, 54, 43, .12 ); color: #a8362b; }
body.btf-br-page .btf-br-leak-tier-pill--costly { background: rgba( 201, 162, 74, .18 ); color: #7d5e1a; }
body.btf-br-page .btf-br-leak-tier-pill--sneaky { background: var( --th-cream-3 ); color: var( --th-ink-2 ); }

body.btf-br-page .btf-br-leak-cost {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .04em;
	color: var( --th-ink-2 );
	white-space: nowrap;
}
body.btf-br-page .btf-br-leak-cost--fatal  { color: #a8362b; }
body.btf-br-page .btf-br-leak-cost--costly { color: #7d5e1a; }

body.btf-br-page .btf-br-leak-desc {
	font-size: .92rem;
	color: var( --th-ink-2 );
	line-height: 1.55;
	max-width: 70ch;
	margin-left: 3em;
}
@media ( max-width: 759.98px ) {
	body.btf-br-page .btf-br-leak-desc { margin-left: 0; }
}


/* ── Quiz ────────────────────────────────────────────────────────── */
body.btf-br-page .btf-br-quiz {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 16px;
	padding: clamp( 1.1rem, 2vw, 1.8rem );
}
body.btf-br-page .btf-br-quiz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .8rem;
	flex-wrap: wrap;
	gap: .5rem;
}
body.btf-br-page .btf-br-quiz-no,
body.btf-br-page .btf-br-quiz-score {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-br-page .btf-br-quiz-score b {
	color: var( --th-ink );
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 500;
	margin-left: .25em;
}
body.btf-br-page .btf-br-quiz-q {
	font-family: var( --th-serif );
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var( --th-ink );
	line-height: 1.3;
}
body.btf-br-page .btf-br-quiz-opts {
	display: grid;
	grid-template-columns: 1fr;
	gap: .6rem;
	margin: 1rem 0;
}
@media ( min-width: 700px ) {
	body.btf-br-page .btf-br-quiz-opts { grid-template-columns: 1fr 1fr; }
}
body.btf-br-page .btf-br-quiz-opt {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 10px;
	padding: .9rem 1rem;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .8rem;
	font: inherit;
	color: var( --th-ink );
	transition: background .15s, border-color .15s;
}
body.btf-br-page .btf-br-quiz-opt:hover:not(:disabled) {
	border-color: var( --th-forest );
	background: var( --th-cream-3 );
}
body.btf-br-page .btf-br-quiz-opt:disabled { cursor: default; opacity: .85; }
body.btf-br-page .btf-br-quiz-opt.is-correct {
	background: var( --th-tip );
	color: var( --th-tip-ink );
	border-color: var( --th-tip-ink );
	opacity: 1;
}
body.btf-br-page .btf-br-quiz-opt.is-wrong {
	background: var( --th-warn );
	color: var( --th-warn-ink );
	border-color: var( --th-warn-ink );
	opacity: 1;
}
body.btf-br-page .btf-br-quiz-opt-letter {
	font-family: var( --th-mono );
	font-size: .8rem;
	font-weight: 700;
	background: var( --th-cream-3 );
	color: var( --th-ink );
	padding: .25rem .55rem;
	border-radius: 4px;
	letter-spacing: .1em;
	flex-shrink: 0;
}
body.btf-br-page .btf-br-quiz-opt.is-correct .btf-br-quiz-opt-letter { background: var( --th-tip-ink ); color: var( --th-tip ); }
body.btf-br-page .btf-br-quiz-opt.is-wrong   .btf-br-quiz-opt-letter { background: var( --th-warn-ink ); color: var( --th-warn ); }
body.btf-br-page .btf-br-quiz-opt-name {
	font-family: var( --th-serif );
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}
body.btf-br-page .btf-br-quiz-explain {
	background: var( --th-cream-3 );
	padding: 1rem 1.1rem;
	border-radius: 10px;
	font-size: .92rem;
	line-height: 1.5;
	color: var( --th-ink-2 );
}
body.btf-br-page .btf-br-quiz-explain b {
	display: block;
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-ink );
	margin-bottom: .25em;
}
body.btf-br-page .btf-br-quiz-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .8rem;
	gap: 1rem;
	flex-wrap: wrap;
}
body.btf-br-page .btf-br-quiz-progress { display: flex; gap: .35rem; flex-wrap: wrap; }
body.btf-br-page .btf-br-quiz-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --th-cream-3 );
	display: inline-block;
}
body.btf-br-page .btf-br-quiz-dot.is-current { background: var( --th-gold ); box-shadow: 0 0 0 3px rgba( 201, 162, 74, .25 ); }
body.btf-br-page .btf-br-quiz-dot.is-done    { background: var( --th-forest ); }
body.btf-br-page .btf-br-quiz-dot.is-wrong   { background: var( --th-red ); }

body.btf-br-page .btf-br-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	background: var( --th-ink );
	color: var( --th-cream );
	border: 1px solid var( --th-ink );
	border-radius: 6px;
	font: 500 .9rem/1 var( --th-sans );
	cursor: pointer;
	text-decoration: none;
	transition: background .15s;
}
body.btf-br-page .btf-br-btn:hover { background: var( --th-forest ); }

body.btf-br-page .btf-br-quiz-final {
	text-align: center;
	padding: 1.5rem 1rem;
}
body.btf-br-page .btf-br-quiz-final-grade {
	font-family: var( --th-serif );
	font-size: clamp( 1.6rem, 3vw, 2.4rem );
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0;
	color: var( --th-ink );
}
body.btf-br-page .btf-br-quiz-final-num {
	font-family: var( --th-serif );
	font-size: clamp( 4rem, 9vw, 6rem );
	font-weight: 300;
	line-height: 1;
	color: var( --th-forest );
	margin: .5rem 0;
	letter-spacing: -.04em;
}
body.btf-br-page .btf-br-quiz-final-of { font-size: .4em; opacity: .4; }
body.btf-br-page .btf-br-quiz-final p {
	font-size: .95rem;
	color: var( --th-ink-2 );
	max-width: 42ch;
	margin: 0 auto 1rem;
	line-height: 1.5;
}