/**
 * texas-holdem.css
 *
 * Editorial long-form styling for /poker/strategy/texas-holdem/.
 * Mobile-first. Loaded via the slug check in functions.php so it does
 * not pollute other strategy posts.
 *
 * All selectors are scoped under .btf-th-page so the design tokens here
 * stay isolated from the global theme. The default page chrome (header
 * nav, footer) still uses the site theme — only the in-content blocks
 * are restyled.
 */

/* All design tokens here pull from the site's base.css palette so this
   page reads as part of Beat The Fish — same green felt, same cream,
   same brass accent, same hairlines. The remaining `--th-*` tokens are
   page-specific (callout tints, derived shades) that don't exist
   site-wide. */
.btf-th-page {
	--th-cream:   var( --bg );          /* #F4EFE6 — site cream */
	--th-cream-2: var( --surface );      /* #FDFBF7 — site surface */
	--th-cream-3: var( --changelog-bg ); /* #d5cfc3 — slightly darker sand */
	--th-ink:     var( --ink );          /* #1C1814 */
	--th-ink-2:   #2a312a;
	--th-muted:   #6b6f63;
	--th-forest:   var( --felt );        /* #1B3A2D — site felt */
	--th-forest-2: #142e22;              /* one shade darker than --felt */
	--th-forest-3: var( --felt2 );       /* #254D3C */
	--th-gold:      var( --brass );      /* #9A7B3C — site brass */
	--th-gold-soft: #b89656;             /* lighter brass for accents on dark */
	--th-red: #8B2D2D;                   /* var(--red) */
	--th-tip:      #d9e4d2;
	--th-tip-ink:  #2d4a2a;
	--th-warn:     #f0d7c8;
	--th-warn-ink: #7a2e15;
	--th-pro:      #e4dcc0;
	--th-pro-ink:  #5a4820;
	--th-hair:     var( --rule );        /* rgba(28,24,20,.08) */
	/* Match the site's exact font stacks (no extra fallbacks). Different
	   fallback chains render Unicode glyphs like the breadcrumb arrow
	   (U+2192) with subtly different shapes when the primary font is
	   missing them. */
	--th-serif: "Instrument Serif", serif;
	--th-sans:  "Outfit", sans-serif;
	--th-mono:  "JetBrains Mono", monospace;
	--th-radius:    var( --radius-sm );   /* 10px — site radius small */
	--th-radius-lg: var( --radius );      /* 16px — site radius */

	background: var( --th-cream );
	color: var( --th-ink );
	font-family: var( --th-sans );
}

/* The default single-generic.php chrome (hero / author-bar / changelog
   / toc) is suppressed at the template level via btf_is_th_page() — no
   CSS hide rules needed. The btf-th-hero block renders its own author
   bar + changelog drawer inline. */

/* Dark-section text selection — match the brass/cream pair used by
   .site-footer / .section-felt elsewhere on the site instead of the
   default ink-on-cream which becomes invisible on the felt. */
body.btf-th-page .btf-th-hero ::selection,
body.btf-th-page .btf-th-hero::selection,
body.btf-th-page .btf-th-summary ::selection,
body.btf-th-page .btf-th-summary::selection,
body.btf-th-page .btf-th-eval-result ::selection,
body.btf-th-page .btf-th-eval-result::selection,
body.btf-th-page .btf-th-pot-result ::selection,
body.btf-th-page .btf-th-pot-result::selection,
body.btf-th-page .btf-th-vs-head ::selection,
body.btf-th-page .btf-th-vs-head::selection,
body.btf-th-page .btf-th-vs-center ::selection,
body.btf-th-page .btf-th-vs-center::selection,
body.btf-th-page .btf-th-street.is-active ::selection,
body.btf-th-page .btf-th-street.is-active::selection,
body.btf-th-page .btf-th-street:hover ::selection,
body.btf-th-page .btf-th-street:hover::selection,
body.btf-th-page .btf-th-pos-felt ::selection,
body.btf-th-page .btf-th-pos-felt::selection {
	background: rgba( 212, 180, 74, .4 );
	color: var( --on-dark );
}

/* The btf-th-* blocks render edge-to-edge inside .section-paper.
   Strip its inner constraints so backgrounds and grids line up. */
body.btf-th-page .section-paper {
	padding: 0;
	background: transparent;
}

body.btf-th-page .section-paper > .wrap {
	max-width: none;
	padding: 0;
}

body.btf-th-page .section-paper .prose {
	max-width: none;
}

/* base.css constrains every direct prose child to 640px (the editorial
   reading-column width). Our hero/section/widget blocks need to span
   full bleed — release that constraint just for our blocks. */
body.btf-th-page .prose > .btf-th-block,
body.btf-th-page .prose > .btf-th-section,
body.btf-th-page .prose > .btf-th-hero,
body.btf-th-page .prose > .btf-th-progress,
body.btf-th-page .prose > .author-bar,
body.btf-th-page .prose > .cl-drawer,
body.btf-th-page .prose > .btf-th-summary,
body.btf-th-page .prose > .btf-th-footstrip {
	max-width: none;
}

/* Neutralize `.prose` global styles inside our blocks. The base theme
   restyles every <a>/<h2>/<h3>/<strong> inside `.prose` — those rules
   would re-color all the editorial type if we didn't push back. We
   re-set color/font/weight to inherit so each block's own rules win. */
/* Match the base.css `.prose a:not(...):not(...):not(...)` specificity
   (0,4,1) so our overrides actually win — without the :not() chain,
   base wins and dark-background links inherit forest green and become
   invisible against the felt. */
body.btf-th-page .prose .btf-th-hero a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-th-page .prose .btf-th-summary a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-th-page .prose .btf-th-widget a:not(.rc-cta):not(.btn-primary):not(.btn-ghost),
body.btf-th-page .prose .btf-th-tldr a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* Inside the dark eval-result panel the link reads in the brass tone,
   no underline — the brass color + arrow already mark it as a link. */
body.btf-th-page .prose .btf-th-eval-result a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) {
	color: var( --th-gold-soft );
	text-decoration: none;
	font-weight: 500;
}

/* The base theme's `.prose h2/h3` rules don't carry a class scope, so
   they hit any heading inside our blocks. We don't blanket-reset them
   (specificity bites — see commit history) — instead each block's own
   per-element rule below scopes against `.btf-th-<name> h<n>`. */

/* Force our display H1/H2/H3 fonts and weights against the base prose rules. */
body.btf-th-page .prose .btf-th-display {
	font-family: var( --th-serif );
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.04;
	color: inherit;
	margin: 0;
}

body.btf-th-page .prose h2.btf-th-display {
	font-size: clamp( 1.9rem, 3.4vw, 3rem );
	margin: 0 0 .4em;
}

/* h1 size/line-height handled by `.hero h1` in hero.css. */

/* Re-apply serif to anything the base `.prose h2/h3` rule would
   override. Color is intentionally NOT set here — each component
   sets its own (cream on dark, ink on light); a blanket `inherit`
   would force every element to follow the prose default and
   break things like the dark vs-head against forest. */
body.btf-th-page .prose h3.btf-th-display,
body.btf-th-page .prose .btf-th-3col h3,
body.btf-th-page .prose .btf-th-summary-card h4,
body.btf-th-page .prose .btf-th-widget-h,
body.btf-th-page .prose .btf-th-pos-info h3,
body.btf-th-page .prose .btf-th-eval-result .hand,
body.btf-th-page .prose .btf-th-street-name,
body.btf-th-page .prose .btf-th-street-detail h4,
body.btf-th-page .prose .btf-th-vs-head,
body.btf-th-page .prose .btf-th-faq summary {
	font-family: var( --th-serif );
	font-weight: 400;
	/* base.css `h1..h6 { color: var(--ink) }` would otherwise force every
	   heading inside our blocks to dark ink — including the active
	   street-name on dark felt. Inheriting from the parent component
	   keeps cream-on-dark and ink-on-light correct. */
	color: inherit;
}

/* Explicit colors where inherit would land on the wrong tone. */
body.btf-th-page .prose .btf-th-vs-head {
	color: var( --th-cream );
}
body.btf-th-page .prose .btf-th-summary-card h4 {
	color: var( --th-cream );
}

body.btf-th-page .prose .btf-th-3col h3 {
	font-size: clamp( 1.2rem, 1.8vw, 1.5rem );
	margin: 0 0 .4em;
	letter-spacing: -.01em;
}

body.btf-th-page .prose .btf-th-summary h2.btf-th-display {
	color: var( --th-cream );
}

/* The display-class `margin: 0` further up wipes the native 16px
   bottom margin from `.hero h1`. Re-apply just for the hero h1. */
body.btf-th-page .prose .btf-th-hero h1.btf-th-display {
	margin: 0 0 16px;
}

body.btf-th-page .prose strong {
	color: inherit;
}

body.btf-th-page .prose p {
	margin: 0;
}

/* Re-apply targeted rules where the design needs them. */
body.btf-th-page .prose .btf-th-display em,
body.btf-th-page .prose .btf-th-eval-result a,
body.btf-th-page .prose .btf-th-pos-stat .val.is-tight,
body.btf-th-page .prose .btf-th-pos-stat .val.is-loose,
body.btf-th-page .prose .btf-th-pos-stat .val.is-medium,
body.btf-th-page .prose .btf-th-pot-result .lbl,
body.btf-th-page .prose .btf-th-pot-verdict b,
body.btf-th-page .prose .btf-th-summary .btf-th-eyebrow {
	color: var( --th-gold-soft );
}

body.btf-th-page .prose .btf-th-pos-stat .val.is-tight { color: var( --th-red ); }
body.btf-th-page .prose .btf-th-pos-stat .val.is-loose { color: #3d7a3d; }
body.btf-th-page .prose .btf-th-pos-stat .val.is-medium { color: var( --th-pro-ink ); }

/* Re-apply paragraph defaults inside body content. */
body.btf-th-page .prose .btf-th-callout p { margin: 0; font-size: .94rem; }
body.btf-th-page .prose .btf-th-callout p + p { margin-top: .5em; }
body.btf-th-page .prose .btf-th-3col p { margin: 0; color: var( --th-ink-2 ); }

/* Restore link styling inside answer/body copy where desired. */
body.btf-th-page .prose .btf-th-faq .answer a,
body.btf-th-page .prose .btf-th-callout a {
	color: var( --th-forest );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Layout primitives ───────────────────────────────────────────────── */
/* Container width comes from the site's `.wrap` (1100px / 24px gutter) —
   we use that class everywhere so this page sits in the same column as
   /reviews/, /poker/, etc. No custom wrap class. */

.btf-th-display {
	font-family: var( --th-serif );
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.04;
}

.btf-th-display em {
	font-style: italic;
	color: var( --th-gold-soft );
}

/* Match the site's `.section-label` style — brass mono caps with a
   short brass accent line above the text. Used as the section +
   interactive eyebrow above each big serif heading. */
.btf-th-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var( --th-mono );
	font-size: .73rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 600;
	color: var( --th-gold );
}

.btf-th-eyebrow::before {
	content: "";
	display: block;
	width: 18px;
	height: 1.5px;
	background: var( --th-gold );
	flex-shrink: 0;
}

.btf-th-lede {
	font-family: var( --th-sans );
	font-size: clamp( 1rem, 1.3vw, 1.18rem );
	line-height: 1.55;
	color: var( --th-ink-2 );
	max-width: 64ch;
}

/* Reading-progress sliver — fixed under the site header; harmless if
   the site nav is sticky too because we sit at top:0 and z-index 60. */
.btf-th-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 60;
	pointer-events: none;
}

.btf-th-progress-bar {
	height: 100%;
	background: var( --th-gold );
	width: 0;
	transition: width .12s linear;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.btf-th-hero {
	/* Background, padding, h1 styles, breadcrumb color, and h1 margin
	   are inherited from the site's native `.hero` class (added on the
	   <section> element) — see hero.css. We only layer 2-col layout
	   bits here. */
	color: var( --th-cream );
}

/* Breadcrumb color + 24px margin-bottom are inherited from the native
   `.hero .breadcrumb` rule in base.css — no overrides needed. */

.btf-th-hero-body {
	/* Outer padding lives on .btf-th-hero so the breadcrumb spacing
	   matches bonuses / reviews. This grid only handles the columns.
	   `align-items: start` keeps the prose column flush with the
	   breadcrumb above — `end` (the previous default) was pushing the
	   H1 down to bottom-align with the taller path card. */
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media ( min-width: 960px ) {
	.btf-th-hero-body {
		grid-template-columns: 1.2fr .9fr;
		gap: 3rem;
	}
}

.btf-th-hero-prose .btf-th-eyebrow {
	color: rgba( 243, 238, 226, .55 );
}

/* h1 styling (font, size, color, 16px bottom margin) comes from the
   native `.hero h1` rule in hero.css. */

.btf-th-hero .btf-th-lede {
	color: rgba( 243, 238, 226, .78 );
	max-width: 52ch;
}

.btf-th-kpis {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.25rem;
	margin-top: 1.75rem;
}

@media ( min-width: 540px ) {
	.btf-th-kpis {
		grid-template-columns: repeat( 4, auto );
		gap: 2rem;
	}
}

.btf-th-kpi {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
}

.btf-th-kpi b {
	display: block;
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.85rem;
	color: var( --th-cream );
	letter-spacing: -.02em;
	margin-top: .15em;
	text-transform: none;
}

.btf-th-paths {
	background: rgba( 243, 238, 226, .06 );
	border: 1px solid rgba( 243, 238, 226, .12 );
	border-radius: var( --th-radius-lg );
	padding: 1.2rem;
}

.btf-th-paths-h {
	font-family: var( --th-mono );
	font-weight: 500;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.btf-th-paths-h::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var( --th-gold );
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba( 201, 162, 74, .2 );
}

.btf-th-path-list {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.btf-th-path {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .9rem 1rem;
	background: rgba( 243, 238, 226, .03 );
	border: 1px solid rgba( 243, 238, 226, .15 );
	border-radius: 10px;
	color: var( --th-cream );
	text-align: left;
	text-decoration: none;
	transition: background .18s, border-color .18s, transform .18s;
}

.btf-th-path:hover,
.btf-th-path:focus-visible {
	background: rgba( 243, 238, 226, .08 );
	border-color: var( --th-gold-soft );
	transform: translateX( 2px );
}

.btf-th-path-num {
	font-family: var( --th-serif );
	font-size: 1.6rem;
	color: var( --th-gold-soft );
	font-weight: 300;
	min-width: 1.5rem;
	line-height: 1;
}

.btf-th-path-body {
	flex: 1;
}

.btf-th-path-label {
	display: block;
	font-family: var( --th-serif );
	font-size: 1.08rem;
	font-weight: 400;
	line-height: 1.2;
}

.btf-th-path-sub {
	display: block;
	font-family: var( --th-sans );
	font-size: .76rem;
	color: rgba( 243, 238, 226, .6 );
	margin-top: .2em;
}

.btf-th-path-arrow {
	margin-left: auto;
	color: rgba( 243, 238, 226, .4 );
	font-family: var( --th-mono );
	transition: color .18s, transform .18s;
}

.btf-th-path:hover .btf-th-path-arrow {
	color: var( --th-gold );
	transform: translateX( 3px );
}

/* The native .author-bar (template-parts/author-bar.php) is rendered
   inside the hero block via get_template_part. It styles itself; we
   only need to release the .prose > * width clamp so it spans full. */

/* ── Section header + sibling-block rhythm ───────────────────────────── */

/* Section header opens a logical section: top padding + border act as
   the divider. Subsequent blocks (widget, callout, tldr, 3col) are flat
   siblings, each centered via .btf-th-wrap. Section bottom padding is
   delivered by the next section's top padding, so we leave it small. */
.btf-th-section {
	padding: var( --space-xl ) 0;
	border-top: 1px solid var( --th-hair );
}

.btf-th-section:first-of-type,
.btf-th-section.is-first,
.btf-th-hero + .btf-th-authorbar + .btf-th-section {
	border-top: 0;
}

.btf-th-section-h .btf-th-eyebrow {
	margin-bottom: .6em;
}

.btf-th-section-h h2 {
	font-size: clamp( 1.9rem, 3.4vw, 3rem );
	margin: 0 0 .4em;
}

.btf-th-section-h .btf-th-lede {
	margin-bottom: 0;
}

/* Removed — section padding now handled by .btf-th-section via
   var(--space-xl). No extra block-level spacer needed. */

/* ── 3-col grid (Objective / Deal / Winning) ─────────────────────────── */

.btf-th-3col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 1.75rem 0;
}

@media ( min-width: 760px ) {
	.btf-th-3col {
		grid-template-columns: repeat( 3, 1fr );
		gap: 2rem;
	}
}

.btf-th-3col h3 {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: clamp( 1.2rem, 1.8vw, 1.5rem );
	margin: 0 0 .4em;
	letter-spacing: -.01em;
}

.btf-th-3col p {
	color: var( --th-ink-2 );
	line-height: 1.55;
	margin: 0;
}

/* ── Callout ─────────────────────────────────────────────────────────── */

.btf-th-callout {
	border-radius: var( --th-radius-lg );
	padding: 1rem 1.1rem;
	margin: 1.5rem 0;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	font-size: .94rem;
	line-height: 1.55;
}

/* Stack the badge above the body on mobile — the inline label + body
   row gets cramped on a 375px viewport. */
@media ( max-width: 540px ) {
	.btf-th-callout {
		flex-direction: column;
		gap: .55rem;
	}
}

.btf-th-callout .btf-th-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;
	text-transform: capitalize;
	align-self: flex-start;
}

.btf-th-callout--tip { background: var( --th-tip ); color: var( --th-tip-ink ); }
.btf-th-callout--tip .btf-th-callout-tag { background: var( --th-tip-ink ); color: var( --th-tip ); }
.btf-th-callout--shortcut { background: var( --th-tip ); color: var( --th-tip-ink ); }
.btf-th-callout--shortcut .btf-th-callout-tag { background: var( --th-tip-ink ); color: var( --th-tip ); }
.btf-th-callout--pitfall { background: var( --th-warn ); color: var( --th-warn-ink ); }
.btf-th-callout--pitfall .btf-th-callout-tag { background: var( --th-warn-ink ); color: var( --th-warn ); }
.btf-th-callout--pro { background: var( --th-pro ); color: var( --th-pro-ink ); }
.btf-th-callout--pro .btf-th-callout-tag { background: var( --th-pro-ink ); color: var( --th-pro ); }
.btf-th-callout--note { background: var( --th-pro ); color: var( --th-pro-ink ); }
.btf-th-callout--note .btf-th-callout-tag { background: var( --th-pro-ink ); color: var( --th-pro ); }

.btf-th-callout p {
	margin: 0;
	font-size: .94rem;
}

.btf-th-callout p + p {
	margin-top: .5em;
}

.btf-th-callout b,
.btf-th-callout strong {
	font-weight: 600;
}

/* ── TL;DR strip ─────────────────────────────────────────────────────── */

.btf-th-tldr {
	border-top: 1px solid var( --th-hair );
	border-bottom: 1px solid var( --th-hair );
	padding: 1rem 0;
	margin: .5rem 0 1.5rem;
	font-size: .94rem;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.2rem;
	align-items: start;
}

.btf-th-tldr-label {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --th-muted );
	padding-top: .15em;
}

.btf-th-tldr p {
	margin: 0;
	color: var( --th-ink-2 );
}

/* ── Generic widget shell ────────────────────────────────────────────── */

.btf-th-widget {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: var( --th-radius-lg );
	padding: clamp( 1rem, 2vw, 1.75rem );
	margin: 1rem 0 0;
	position: relative;
}

.btf-th-widget-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.btf-th-widget-tag {
	font-family: var( --th-mono );
	font-size: .73rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --th-gold );
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.btf-th-widget-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var( --th-gold );
	border-radius: 1px;
	transform: rotate( 45deg );
}

/* Bare class for non-prose contexts (editor preview etc.) */
.btf-th-widget-h {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.6rem;
	margin: .15em 0 .15em;
	letter-spacing: -.01em;
}

/* Specificity bump to beat `.prose h3` (0,1,1). */
body.btf-th-page .prose h3.btf-th-widget-h {
	font-size: 1.6rem;
}

/* Specificity bump — `body.btf-th-page .prose p { margin: 0 }` further
   up beats the bare class rule, which would zero out the bottom space
   we want between the widget lede and the widget body. */
body.btf-th-page .prose .btf-th-widget-lede {
	color: var( --th-ink-2 );
	max-width: 62ch;
	margin: 0 0 2rem;
	font-size: .95rem;
	line-height: 1.55;
}

.btf-th-pill {
	display: inline-flex;
	align-items: center;
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .3rem .55rem;
	background: var( --th-cream-3 );
	border-radius: 3px;
	color: var( --th-ink-2 );
}

.btf-th-pill--beginner { background: #d9e4d2; color: #2d4a2a; }
.btf-th-pill--intermediate { background: #e4dcc0; color: #5a4820; }
.btf-th-pill--advanced { background: #e8d4ca; color: #6a2818; }

/* ── Mini playing cards (used in evaluator + game-loop) ──────────────── */

.btf-th-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 50px;
	background: #fafaf5;
	border: 1px solid #222;
	border-radius: 4px;
	font-family: var( --th-serif );
	font-weight: 500;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, .15 ), inset 0 0 0 1px #fff;
	flex-shrink: 0;
}

.btf-th-card--red { color: var( --th-red ); }
.btf-th-card--black { color: var( --th-ink ); }
.btf-th-card--back {
	background: repeating-linear-gradient( 45deg, var( --th-forest ) 0 6px, var( --th-forest-3 ) 6px 12px );
	border-color: var( --th-forest-2 );
	color: transparent;
}

.btf-th-card--empty {
	background: transparent;
	border: 1px dashed var( --th-hair );
	box-shadow: none;
}

.btf-th-card .btf-th-card-rank { font-size: 1rem; line-height: 1; }
.btf-th-card .btf-th-card-suit { font-size: .78rem; line-height: 1; margin-left: 1px; }

/* ── Evaluator widget ────────────────────────────────────────────────── */

.btf-th-eval {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media ( min-width: 760px ) {
	.btf-th-eval {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.btf-th-eval-slotgroup {
	background: var( --th-cream-3 );
	border-radius: var( --th-radius );
	padding: .9rem;
}

.btf-th-eval-slotgroup + .btf-th-eval-slotgroup {
	margin-top: .55rem;
}

.btf-th-eval-slotgroup-h {
	margin: 0 0 .55rem;
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	display: flex;
	justify-content: space-between;
}

.btf-th-eval-slots {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}

.btf-th-eval-slot {
	width: 40px;
	height: 56px;
	border: 1.5px dashed var( --th-muted );
	border-radius: 5px;
	background: rgba( 255, 255, 255, .3 );
	cursor: pointer;
	display: grid;
	place-items: center;
	font-family: var( --th-mono );
	font-size: .72rem;
	color: var( --th-muted );
	transition: border-color .15s, color .15s, background .15s;
	padding: 0;
}

.btf-th-eval-slot:hover {
	border-color: var( --th-forest );
	color: var( --th-forest );
}

.btf-th-eval-slot.is-filled {
	border-style: solid;
	background: transparent;
}

.btf-th-eval-slot.is-active {
	border-color: var( --th-gold );
	background: rgba( 201, 162, 74, .12 );
}

.btf-th-eval-picker {
	margin-top: .9rem;
	padding: .9rem;
	background: var( --th-cream );
	border-radius: var( --th-radius );
	border: 1px solid var( --th-hair );
}

.btf-th-eval-rank-row,
.btf-th-eval-suit-row {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
	margin-bottom: .5rem;
}

.btf-th-eval-rank,
.btf-th-eval-suit {
	font-family: var( --th-serif );
	font-weight: 500;
	padding: .42rem .55rem;
	border: 1px solid var( --th-hair );
	background: var( --th-cream-2 );
	border-radius: 4px;
	cursor: pointer;
	min-width: 2.1rem;
	text-align: center;
	font-size: .94rem;
	color: var( --th-ink );
	transition: background .12s, color .12s, border-color .12s;
}

.btf-th-eval-rank:hover,
.btf-th-eval-suit:hover {
	background: var( --th-cream-3 );
}

.btf-th-eval-rank.is-selected {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}

.btf-th-eval-rank:disabled,
.btf-th-eval-suit:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.btf-th-eval-suit {
	font-size: 1.2rem;
	padding: .32rem .65rem;
	min-width: auto;
}

.btf-th-eval-suit--red { color: var( --th-red ); }
.btf-th-eval-suit--black { color: var( --th-ink ); }

.btf-th-eval-actions {
	display: flex;
	gap: .5rem;
	margin-top: .8rem;
	flex-wrap: wrap;
}

.btf-th-eval-actions button {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var( --th-hair );
	padding: .42rem .65rem;
	border-radius: 4px;
	cursor: pointer;
	color: var( --th-muted );
}

.btf-th-eval-actions button:hover {
	color: var( --th-ink );
	border-color: var( --th-ink );
}

.btf-th-eval-result {
	background: var( --th-forest );
	color: var( --th-cream );
	padding: 1.2rem;
	border-radius: var( --th-radius );
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}

.btf-th-eval-result .status {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-gold-soft );
	margin-bottom: .5rem;
}

.btf-th-eval-result .hand {
	font-family: var( --th-serif );
	font-size: clamp( 1.6rem, 4vw, 2.1rem );
	line-height: 1.05;
	margin-bottom: .3rem;
	letter-spacing: -.02em;
}

.btf-th-eval-result .hand.is-empty {
	opacity: .4;
}

.btf-th-eval-result .desc {
	color: rgba( 243, 238, 226, .75 );
	font-size: .92rem;
	line-height: 1.5;
	margin: 0 0 1rem;
}

.btf-th-eval-result .rank-line {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .08em;
	color: rgba( 243, 238, 226, .5 );
	text-transform: uppercase;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba( 243, 238, 226, .15 );
}

.btf-th-eval-result a {
	color: var( --th-gold-soft );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Game loop (4 streets) ───────────────────────────────────────────── */

.btf-th-streets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-top: 1.25rem;
}

@media ( min-width: 720px ) {
	.btf-th-streets {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.btf-th-street {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: var( --th-radius );
	padding: 1rem;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
	text-align: left;
	font: inherit;
	color: inherit;
	min-width: 0;
	overflow: hidden;
}

.btf-th-street:hover,
.btf-th-street.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}

.btf-th-street-num {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	color: var( --th-muted );
	margin-bottom: .5rem;
	display: block;
	text-transform: uppercase;
}

.btf-th-street.is-active .btf-th-street-num,
.btf-th-street:hover .btf-th-street-num {
	color: var( --th-gold-soft );
}

.btf-th-street-name {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0 0 .2em;
}

.btf-th-street-cards {
	display: flex;
	gap: .15rem;
	margin-top: .65rem;
	height: 42px;
	align-items: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.btf-th-street-cards .btf-th-card {
	width: 28px;
	height: 40px;
	flex-shrink: 0;
}

.btf-th-street-cards .btf-th-card .btf-th-card-rank { font-size: .8rem; }
.btf-th-street-cards .btf-th-card .btf-th-card-suit { font-size: .65rem; }

.btf-th-street-sub {
	font-size: .8rem;
	color: var( --th-muted );
	margin-top: .4em;
}

.btf-th-street.is-active .btf-th-street-sub,
.btf-th-street:hover .btf-th-street-sub {
	color: rgba( 243, 238, 226, .75 );
}

.btf-th-street-detail {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: var( --th-cream );
	border-radius: var( --th-radius-lg );
	border: 1px solid var( --th-hair );
}

.btf-th-street-detail h4 {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.3rem;
	margin: 0 0 .35em;
}

.btf-th-street-detail .desc {
	margin: 0;
	color: var( --th-ink-2 );
	max-width: 64ch;
	line-height: 1.55;
}

.btf-th-street-detail .substeps {
	display: grid;
	grid-template-columns: 1fr;
	gap: .9rem;
	margin-top: 1rem;
}

@media ( min-width: 540px ) {
	.btf-th-street-detail .substeps {
		grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	}
}

.btf-th-street-detail .substep {
	font-size: .88rem;
	line-height: 1.5;
}

.btf-th-street-detail .substep b {
	display: block;
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin-bottom: .25em;
	font-weight: 500;
}

/* ── Position map ────────────────────────────────────────────────────── */

.btf-th-pos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
}

@media ( min-width: 880px ) {
	.btf-th-pos {
		grid-template-columns: 1.1fr 1fr;
		gap: 2rem;
	}
}

.btf-th-pos-table {
	position: relative;
	aspect-ratio: 1.3 / 1;
	max-width: 520px;
	margin: 0 auto;
	width: 100%;
}

.btf-th-pos-rail {
	position: absolute;
	inset: 4%;
	border-radius: 50%;
	background: linear-gradient( 135deg, #3a2817, #2a1d10 );
	box-shadow: 0 10px 20px rgba( 0, 0, 0, .2 );
}

.btf-th-pos-felt {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background: radial-gradient( ellipse at 30% 30%, var( --th-forest-3 ), var( --th-forest ) 70%, var( --th-forest-2 ) );
	box-shadow:
		inset 0 0 0 8px rgba( 0, 0, 0, .2 ),
		inset 0 0 40px rgba( 0, 0, 0, .3 ),
		0 20px 40px rgba( 0, 0, 0, .15 );
}

.btf-th-pos-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	color: var( --th-gold-soft );
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .4;
	text-align: center;
}

.btf-th-pos-seat {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transform: translate( -50%, -50% );
	cursor: pointer;
	display: grid;
	place-items: center;
	font-family: var( --th-mono );
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	background: var( --th-cream-2 );
	border: 2px solid var( --th-cream-3 );
	color: var( --th-ink );
	transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
	padding: 0;
}

@media ( min-width: 540px ) {
	.btf-th-pos-seat {
		width: 54px;
		height: 54px;
		font-size: .72rem;
	}
}

.btf-th-pos-seat:hover {
	transform: translate( -50%, -50% ) scale( 1.08 );
	border-color: var( --th-gold );
}

.btf-th-pos-seat.is-active {
	background: var( --th-gold );
	border-color: var( --th-gold-soft );
	color: var( --th-forest-2 );
	box-shadow: 0 0 0 4px rgba( 201, 162, 74, .25 ), 0 4px 12px rgba( 0, 0, 0, .2 );
	z-index: 2;
}

.btf-th-pos-seat .dealer {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: white;
	color: #222;
	border: 1px solid #222;
	display: grid;
	place-items: center;
	font-size: .58rem;
	font-weight: 700;
	font-family: var( --th-mono );
}

.btf-th-pos-info .seat-label {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
}

.btf-th-pos-info h3 {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: clamp( 1.6rem, 3vw, 2rem );
	margin: .15em 0 .3em;
	letter-spacing: -.01em;
}

.btf-th-pos-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .7rem;
	margin: 1.1rem 0;
}

.btf-th-pos-stat {
	background: var( --th-cream-3 );
	padding: .7rem .85rem;
	border-radius: var( --th-radius );
	border: 1px solid var( --th-hair );
}

.btf-th-pos-stat b {
	display: block;
	font-family: var( --th-mono );
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin-bottom: .3em;
	font-weight: 500;
}

.btf-th-pos-stat .val {
	font-family: var( --th-serif );
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.1;
}

.btf-th-pos-stat .val.is-tight { color: var( --th-red ); }
.btf-th-pos-stat .val.is-loose { color: #3d7a3d; }
.btf-th-pos-stat .val.is-medium { color: var( --th-pro-ink ); }

/* Reserve enough vertical space for the longest seat description (3
   lines at desktop) so the right column doesn't pop up/down each time
   the user picks a seat. The note callout below has its own reserved
   height for the same reason. */
.btf-th-pos-desc {
	font-size: .94rem;
	line-height: 1.55;
	color: var( --th-ink-2 );
	margin: 0;
	min-height: calc( 1.55em * 3 );
}

.btf-th-pos-note {
	margin-top: 1rem;
	min-height: calc( 1.55em * 2 + 2rem );
}

/* ── Matrix (13×13) ──────────────────────────────────────────────────── */

.btf-th-matrix-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: start;
}

@media ( min-width: 880px ) {
	.btf-th-matrix-wrap {
		grid-template-columns: 1fr 240px;
		gap: 1.5rem;
	}
}

.btf-th-matrix {
	display: grid;
	grid-template-columns: repeat( 13, 1fr );
	gap: 2px;
	aspect-ratio: 1 / 1;
}

.btf-th-mcell {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	font-family: var( --th-mono );
	font-size: .58rem;
	font-weight: 600;
	border-radius: 2px;
	user-select: none;
	transition: transform .1s;
}

@media ( min-width: 540px ) {
	.btf-th-mcell {
		font-size: .62rem;
	}
}

.btf-th-mcell:hover {
	transform: scale( 1.15 );
	z-index: 3;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, .2 );
}

.btf-th-mcell--raise { background: #2a5f3a; color: white; }
.btf-th-mcell--call  { background: var( --th-gold ); color: #2a1d10; }
.btf-th-mcell--mixed { background: #7a8556; color: white; }
.btf-th-mcell--fold  { background: var( --th-cream-3 ); color: var( --th-muted ); }

.btf-th-matrix-controls h4 {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.1rem;
	margin: 0 0 .5em;
}

.btf-th-matrix-pos {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-bottom: 1rem;
}

.btf-th-matrix-pos button {
	text-align: left;
	padding: .55rem .75rem;
	background: transparent;
	border: 1px solid var( --th-hair );
	border-radius: 5px;
	font: 500 .82rem/1.2 var( --th-sans );
	cursor: pointer;
	color: var( --th-ink-2 );
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background .12s, color .12s, border-color .12s;
}

.btf-th-matrix-pos button:hover {
	background: var( --th-cream-3 );
}

.btf-th-matrix-pos button.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}

.btf-th-matrix-pos button .pct {
	font-family: var( --th-mono );
	font-size: .72rem;
	opacity: .7;
}

.btf-th-matrix-legend {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --th-hair );
}

.btf-th-matrix-legend .lg-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .8rem;
}

.btf-th-matrix-legend .lg-sw {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	flex-shrink: 0;
}

.btf-th-matrix-legend .lg-count {
	margin-left: auto;
	font-family: var( --th-mono );
	font-size: .72rem;
	color: var( --th-muted );
}

.btf-th-matrix-note {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .06em;
	color: var( --th-muted );
	line-height: 1.5;
	margin-top: .8rem;
}

/* ── Pot odds ────────────────────────────────────────────────────────── */

.btf-th-pot {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: stretch;
	margin-top: 1.25rem;
}

@media ( min-width: 760px ) {
	.btf-th-pot {
		grid-template-columns: 1fr 1fr;
	}
}

.btf-th-pot-inputs {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.btf-th-pot-input {
	background: var( --th-cream-3 );
	padding: .85rem 1rem;
	border-radius: var( --th-radius );
	border: 1px solid var( --th-hair );
}

.btf-th-pot-input label {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	display: flex;
	justify-content: space-between;
}

.btf-th-pot-input .hint {
	opacity: .7;
}

.btf-th-pot-num {
	display: flex;
	align-items: baseline;
	padding: .15em 0 0;
}

.btf-th-pot-num::before {
	content: "$";
	font: 500 1.85rem/1 var( --th-serif );
	color: var( --th-ink );
	letter-spacing: -.02em;
	margin-right: .08em;
}

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

.btf-th-pot-input input[type="number"]::-webkit-outer-spin-button,
.btf-th-pot-input input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.btf-th-pot-input .slider {
	width: 100%;
	margin-top: .35rem;
	accent-color: var( --th-forest );
}

.btf-th-pot-presets {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}

.btf-th-pot-presets button {
	font-family: var( --th-mono );
	font-size: .7rem;
	padding: .3rem .55rem;
	background: transparent;
	border: 1px solid var( --th-hair );
	border-radius: 4px;
	cursor: pointer;
	color: var( --th-muted );
}

.btf-th-pot-presets button:hover {
	color: var( --th-ink );
	border-color: var( --th-ink );
}

.btf-th-pot-result {
	background: linear-gradient( 135deg, var( --th-forest ), var( --th-forest-2 ) );
	color: var( --th-cream );
	padding: 1.4rem;
	border-radius: var( --th-radius );
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.btf-th-pot-result .lbl {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-gold-soft );
}

.btf-th-pot-result .big {
	font-family: var( --th-serif );
	font-size: clamp( 2.4rem, 6vw, 3.2rem );
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
}

.btf-th-pot-result .big .unit {
	font-size: .55em;
	opacity: .6;
	margin-left: .1em;
}

.btf-th-pot-bar {
	display: flex;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba( 243, 238, 226, .15 );
	margin-top: .25rem;
}

.btf-th-pot-bar .need {
	background: var( --th-gold-soft );
}

.btf-th-pot-ratio {
	font-family: var( --th-mono );
	font-size: .76rem;
	color: rgba( 243, 238, 226, .65 );
	letter-spacing: .06em;
	margin-top: .4rem;
}

.btf-th-pot-ratio b {
	color: var( --th-cream );
}

.btf-th-pot-verdict {
	font-size: .94rem;
	line-height: 1.5;
	color: rgba( 243, 238, 226, .85 );
	padding-top: .8rem;
	border-top: 1px solid rgba( 243, 238, 226, .15 );
	margin-top: auto;
}

.btf-th-pot-verdict b {
	color: var( --th-gold-soft );
	font-family: var( --th-mono );
	font-size: .76rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	display: block;
	margin-bottom: .3em;
}

.btf-th-equity-table {
	margin-top: 1.5rem;
	border-collapse: collapse;
	width: 100%;
	font-size: .88rem;
}

.btf-th-equity-table th,
.btf-th-equity-table td {
	padding: .55rem .8rem;
	text-align: left;
	border-bottom: 1px solid var( --th-hair );
}

.btf-th-equity-table th {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
	font-weight: 500;
}

.btf-th-equity-table tbody tr:hover {
	background: var( --th-cream-3 );
}

.btf-th-equity-table td.num {
	font-family: var( --th-mono );
	text-align: right;
}

/* ── GTO vs. Exploitative ─────────────────────────────────────────────── */

.btf-th-vs {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var( --th-hair );
	border-radius: var( --th-radius-lg );
	overflow: hidden;
	background: var( --th-cream-2 );
}

@media ( min-width: 800px ) {
	.btf-th-vs {
		grid-template-columns: 1fr auto 1fr;
	}
}

.btf-th-vs-head {
	padding: 1.2rem 1.4rem;
	font-family: var( --th-serif );
	font-size: 1.25rem;
	font-weight: 400;
	background: var( --th-forest );
	color: var( --th-cream );
	display: flex;
	align-items: center;
	gap: .5rem;
}

.btf-th-vs-head .badge {
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba( 243, 238, 226, .12 );
	padding: .25rem .5rem;
	border-radius: 3px;
	font-weight: 500;
}

.btf-th-vs-center {
	background: var( --th-forest-2 );
	color: var( --th-gold-soft );
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	display: grid;
	place-items: center;
	padding: .5rem 1rem;
}

.btf-th-vs-cell {
	padding: 1rem 1.2rem;
	border-top: 1px solid var( --th-hair );
	font-size: .92rem;
	line-height: 1.5;
	background: var( --th-cream-2 );
}

.btf-th-vs-cell.is-topic {
	background: var( --th-cream-3 );
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-ink-2 );
	font-weight: 600;
	display: grid;
	place-items: center;
	padding: 1rem .5rem;
	text-align: center;
}

@media ( min-width: 800px ) {
	.btf-th-vs-cell.is-topic {
		white-space: nowrap;
	}
}

/* ── Mobile reformat for the GTO vs. table ───────────────────────────
   The 3-column comparison doesn't survive a 375px viewport — text
   gets crushed and the central "vs." spacer adds nothing useful at
   that width. On mobile we drop the headers, surface the topic as
   a small dark divider, and label the GTO/Exploit answers inline
   via mono ::before tags so the user can still tell them apart. */
@media ( max-width: 799px ) {
	.btf-th-vs {
		display: block;
		background: transparent;
		border: 0;
		overflow: visible;
	}

	.btf-th-vs-head,
	.btf-th-vs-center {
		display: none;
	}

	.btf-th-vs-cell {
		display: block;
		border-top: 0;
		border-left: 1px solid var( --th-hair );
		border-right: 1px solid var( --th-hair );
		padding: 1rem 1.1rem;
	}

	/* GTO answer (4th, 7th, 10th… DOM child of .btf-th-vs). */
	.btf-th-vs-cell:nth-child( 3n + 1 ) {
		border-top: 1px solid var( --th-hair );
		border-radius: var( --th-radius ) var( --th-radius ) 0 0;
		margin-top: 1.25rem;
	}

	.btf-th-vs-cell:nth-child( 3n + 1 )::before,
	.btf-th-vs-cell:nth-child( 3n + 3 )::before {
		content: "GTO";
		display: block;
		font-family: var( --th-mono );
		font-size: .68rem;
		font-weight: 600;
		letter-spacing: .09em;
		text-transform: uppercase;
		color: var( --th-gold );
		margin-bottom: .35em;
	}

	.btf-th-vs-cell:nth-child( 3n + 3 )::before {
		content: "Exploitative";
	}

	/* Exploit answer (6th, 9th… DOM child). */
	.btf-th-vs-cell:nth-child( 3n + 3 ) {
		border-bottom: 1px solid var( --th-hair );
		border-radius: 0 0 var( --th-radius ) var( --th-radius );
	}

	/* Topic label sits BETWEEN GTO and Exploit cells as a slim
	   dark-felt divider so the two answers read as a paired group. */
	.btf-th-vs-cell.is-topic {
		background: var( --th-forest );
		color: var( --th-cream );
		padding: .65rem 1.1rem;
		text-align: left;
		place-items: start;
		border-left: 1px solid var( --th-forest );
		border-right: 1px solid var( --th-forest );
		white-space: normal;
		letter-spacing: .14em;
	}

	/* The first GTO cell shouldn't carry the extra top margin we use
	   to separate the row groups. */
	.btf-th-vs-cell:nth-child( 4 ) {
		margin-top: 0;
	}
}

/* ── FAQ accordion ───────────────────────────────────────────────────── */

.btf-th-faq {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	/* `margin-top` removed — the .btf-th-block wrapper already provides
	   top padding from the section header. A separate margin made the
	   first FAQ item drift too far from "Common questions". */
	margin-bottom: clamp( 2rem, 4vw, 3.5rem );
}

.btf-th-faq details {
	border: 1px solid var( --th-hair );
	border-radius: var( --th-radius );
	background: var( --th-cream-2 );
	overflow: hidden;
}

.btf-th-faq summary {
	padding: 1rem 1.2rem;
	font-family: var( --th-serif );
	font-size: 1.08rem;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	list-style: none;
}

.btf-th-faq summary::-webkit-details-marker { display: none; }

.btf-th-faq summary::after {
	content: "+";
	font-family: var( --th-mono );
	font-size: 1rem;
	color: var( --th-muted );
	transition: transform .2s;
}

.btf-th-faq details[open] summary::after {
	content: "×";
	color: var( --th-ink );
}

.btf-th-faq summary:hover {
	background: var( --th-cream-3 );
}

.btf-th-faq .answer {
	padding: 0 1.2rem 1.2rem;
	font-size: .94rem;
	line-height: 1.6;
	color: var( --th-ink-2 );
	max-width: 68ch;
}

/* ── Closing "Three ideas" summary section ───────────────────────────── */

.btf-th-summary {
	background: var( --th-forest );
	color: var( --th-cream );
	padding: clamp( 2.5rem, 6vw, 5rem ) 0;
}

.btf-th-summary .btf-th-eyebrow {
	color: var( --th-gold-soft );
}

.btf-th-summary h2 {
	color: var( --th-cream );
	margin: .35em 0 .4em;
	font-size: clamp( 1.9rem, 3.4vw, 3rem );
}

.btf-th-summary .btf-th-lede {
	color: rgba( 243, 238, 226, .78 );
}

.btf-th-summary-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 2rem;
}

@media ( min-width: 760px ) {
	.btf-th-summary-cards {
		grid-template-columns: repeat( 3, 1fr );
		gap: 1.5rem;
	}
}

.btf-th-summary-card {
	background: rgba( 243, 238, 226, .04 );
	border: 1px solid rgba( 243, 238, 226, .12 );
	border-radius: var( --th-radius-lg );
	padding: 1.2rem;
}

.btf-th-summary-card .num {
	font-family: var( --th-serif );
	font-size: 2.3rem;
	color: var( --th-gold-soft );
	line-height: 1;
	font-weight: 300;
	display: block;
	margin-bottom: .3em;
}

.btf-th-summary-card h4 {
	font-family: var( --th-serif );
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 .35em;
}

/* Specificity bump (4 classes) — base.css `.section-paper > .wrap
   p:not([class])` was winning and forcing dark ink-3 on these
   light-on-dark cards, making the body text near-invisible. */
body.btf-th-page .prose .btf-th-summary .btf-th-summary-card p {
	color: rgba( 244, 239, 230, .8 );
	font-size: .92rem;
	margin: 0;
	line-height: 1.55;
}

/* ── Glossary tooltip ────────────────────────────────────────────────
   Inline `.btf-th-gloss` decorations are auto-injected by JS. The
   tooltip is a single shared element appended to <body>; positioning
   is JS-driven so it can clamp to the viewport edges. */

.btf-th-gloss {
	border-bottom: 1px dotted currentColor;
	cursor: help;
	color: inherit;
	transition: color .15s;
}

.btf-th-gloss:hover,
.btf-th-gloss:focus {
	color: var( --th-gold );
	outline: 0;
}

/* On the dark-felt panels (eval-result, summary, hero, etc.) the
   dotted underline reads better in the brass tone. */
.btf-th-hero .btf-th-gloss,
.btf-th-summary .btf-th-gloss,
.btf-th-eval-result .btf-th-gloss,
.btf-th-pot-result .btf-th-gloss {
	border-bottom-color: rgba( 244, 239, 230, .4 );
}

.btf-th-hero .btf-th-gloss:hover,
.btf-th-summary .btf-th-gloss:hover,
.btf-th-eval-result .btf-th-gloss:hover,
.btf-th-pot-result .btf-th-gloss:hover {
	color: var( --th-gold-soft );
}

#btf-th-gloss-tip {
	position: absolute;
	z-index: 100;
	background: var( --th-ink );
	color: var( --th-cream );
	padding: .7rem .85rem;
	border-radius: 6px;
	font-size: .82rem;
	line-height: 1.45;
	max-width: 280px;
	font-family: var( --th-sans );
	font-weight: 400;
	box-shadow: 0 10px 25px rgba( 0, 0, 0, .2 );
	display: none;
	pointer-events: none;
}

#btf-th-gloss-tip.is-visible {
	display: block;
}

#btf-th-gloss-tip b {
	display: block;
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --th-gold-soft );
	margin-bottom: .35em;
	font-weight: 600;
}

#btf-th-gloss-tip::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
}

#btf-th-gloss-tip[data-flip="up"]::after {
	bottom: -10px;
	border-top-color: var( --th-ink );
}

#btf-th-gloss-tip[data-flip="down"]::after {
	top: -10px;
	border-bottom-color: var( --th-ink );
}

/* ── Footer strip ────────────────────────────────────────────────────── */

.btf-th-footstrip {
	background: var( --th-forest-2 );
	color: rgba( 243, 238, 226, .55 );
	padding: 1.5rem 0;
	font-family: var( --th-mono );
	font-size: .74rem;
	letter-spacing: .04em;
}

.btf-th-footstrip-inner {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

@media ( min-width: 720px ) {
	.btf-th-footstrip-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}