/* ── Video poker pay tables — scoped page styles ───────────────────────────
   /video-poker/strategy/pay-tables/, scoped under body.btf-vpt-page.

   Built on the blackjack guides' conventions (blackjack-table-selection-page.css
   is the closest sibling: choosing a game by its price): hero chrome from
   texas-holdem.css, a felt card in the hero aside, paper sections with a
   hairline between them, the ledger, the FAQ accordion and the form controls.
   Serif for headings and display figures, Outfit for body and component text,
   mono for eyebrows and micro-labels.

   NOTE: do NOT alias --ink (circular with texas-holdem's --th-ink).
   ──────────────────────────────────────────────────────────────────────── */
body.btf-vpt-page {
	--forest:    var( --th-forest );
	--forest-3:  var( --th-forest-3 );
	--gold:      var( --th-gold );
	--gold-soft: var( --th-gold-soft );
	--cream:     var( --th-cream );
	--cream-2:   var( --th-cream-2 );
	--ink-2:     var( --th-ink-2 );
	--muted:     var( --th-muted );
	--hair:      var( --th-hair );
	--line:      rgba( 28, 24, 20, .14 );
	--red:       var( --th-red );
	--serif:     var( --th-serif );
	--sans:      var( --th-sans );
	--mono:      var( --th-mono );
	--radius:    var( --th-radius );
	--radius-lg: var( --th-radius-lg );
}

/* ── hero ───────────────────────────────────────────────────────────────── */
body.btf-vpt-page .btf-th-hero-prose .hero-intro { margin: 0 0 1.3rem; }
body.btf-vpt-page .btf-th-hero-prose .vpt-quick { font-family: var( --sans ); font-size: .95rem; line-height: 1.7; color: rgba( 244, 239, 230, .85 ); max-width: 52ch; margin: 0 0 1.8rem; }
body.btf-vpt-page .vpt-quick b { color: #fff; }
body.btf-vpt-page .btf-vpt-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
body.btf-vpt-page .btf-vpt-hero-cta a { min-height: 44px; }
body.btf-vpt-page .btf-vpt-hero-viz { display: flex; flex-direction: column; gap: .8rem; }
body.btf-vpt-page .btf-vpt-hero-viz-title { font-family: var( --mono ); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var( --gold-soft ); }

/* the full-pay list, on felt */
body.btf-vpt-page .vpt-best { padding: 1.3rem 1.45rem 1.1rem; background: rgba( 244, 239, 230, .03 ); border: 1px solid rgba( 244, 239, 230, .16 ); border-radius: var( --radius-lg ); }
body.btf-vpt-page .vpt-best-head,
body.btf-vpt-page .vpt-best-row { display: grid; grid-template-columns: minmax( 0, 1fr ) auto 4.6rem; gap: .9rem; align-items: baseline; }
body.btf-vpt-page .vpt-best-head { padding-bottom: .55rem; border-bottom: 1px solid rgba( 244, 239, 230, .15 ); }
body.btf-vpt-page .vpt-best-head span { font-family: var( --mono ); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 244, 239, 230, .5 ); }
body.btf-vpt-page .vpt-best-head span:last-child,
body.btf-vpt-page .vpt-best-ret { text-align: right; }
body.btf-vpt-page .vpt-best-row { padding: .55rem 0; border-bottom: 1px solid rgba( 244, 239, 230, .08 ); }
body.btf-vpt-page .vpt-best-game { font-family: var( --sans ); font-size: .9rem; color: rgba( 244, 239, 230, .9 ); }
body.btf-vpt-page .vpt-best-table { font-family: var( --mono ); font-size: .78rem; color: #E6D1A5; white-space: nowrap; }
body.btf-vpt-page .vpt-best-ret { font-family: var( --mono ); font-size: .8rem; font-weight: 600; color: var( --cream ); }
body.btf-vpt-page .vpt-best-row.is-over .vpt-best-ret { color: #9FD3AE; }
body.btf-vpt-page .btf-vpt-hero-viz .vpt-best .vpt-best-note { font-family: var( --sans ); font-size: .76rem; line-height: 1.6; color: rgba( 244, 239, 230, .62 ); margin: .9rem 0 .2rem; }
/* texas-holdem strips hero links to plain text at (0,6,2); this one keeps its underline */
body.btf-vpt-page .btf-vpt-hero .vpt-best a.vpt-best-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-family: var( --sans ); font-size: .8rem; color: var( --cream ); text-decoration: underline; text-underline-offset: 3px; }

/* ── section rhythm: paper, hairline between sections ───────────────────── */
body.btf-vpt-page .btf-vpt-section { padding: 3.6rem 0 3.4rem; border-bottom: 1px solid var( --hair ); scroll-margin-top: 80px; }
body.btf-vpt-page .btf-vpt-section > .wrap > .btf-th-eyebrow { margin-bottom: .9rem; }
body.btf-vpt-page .btf-vpt-section h2.btf-th-display { margin: 0 0 .55em; font-size: clamp( 1.7rem, 3.4vw, 2.4rem ); }
body.btf-vpt-page .btf-vpt-section .btf-th-lede { margin: 0 0 1.7rem; color: var( --ink-2 ); max-width: 72ch; }
body.btf-vpt-page .btf-vpt-section .wrap p { font-family: var( --sans ); font-size: 1rem; line-height: 1.7; color: var( --ink-2 ); max-width: 68ch; margin: 0 0 1.15em; }
body.btf-vpt-page .btf-vpt-section .wrap p:last-child { margin-bottom: 0; }
body.btf-vpt-page .btf-vpt-section .wrap p b { color: var( --th-ink ); }
body.btf-vpt-page .btf-vpt-section .wrap p a { color: var( --forest ); font-weight: 600; }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-fine { font-size: .82rem; line-height: 1.6; color: var( --muted ); max-width: 95ch; margin: 1.4rem 0 0; }
body.btf-vpt-page .btf-vpt-section h3.btf-th-display.vpt-subhead { font-size: clamp( 1.35rem, 2.2vw, 1.65rem ); line-height: 1.2; margin: 2.6rem 0 1rem; }
body.btf-vpt-page .vpt-label { display: block; font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --gold ); margin-bottom: .45rem; }

/* ── read one ───────────────────────────────────────────────────────────── */
body.btf-vpt-page .vpt-read-layout { display: grid; grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr ); gap: 2.4rem; align-items: start; }
body.btf-vpt-page .vpt-glass-table { width: 100%; border-collapse: collapse; font-family: var( --sans ); }
body.btf-vpt-page .vpt-glass-table caption { text-align: left; font-size: .82rem; line-height: 1.55; color: var( --muted ); padding-bottom: .8rem; }
body.btf-vpt-page .vpt-glass-table thead th { font-family: var( --mono ); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: rgba( 244, 239, 230, .85 ); font-weight: 600; padding: .65rem .8rem; border: none; text-align: right; }
body.btf-vpt-page .vpt-glass-table thead th:first-child { text-align: left; }
body.btf-vpt-page .vpt-glass-table tbody th { text-align: left; font-family: var( --sans ); font-weight: 600; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var( --th-ink ); padding: .55rem .8rem; border-bottom: 1px solid var( --hair ); }
body.btf-vpt-page .vpt-glass-table td { font-family: var( --mono ); font-size: .84rem; color: var( --ink-2 ); text-align: right; padding: .55rem .8rem; border-bottom: 1px solid var( --hair ); white-space: nowrap; }
body.btf-vpt-page .vpt-glass-table tr.is-key1 td.vpt-glass-one,
body.btf-vpt-page .vpt-glass-table tr.is-key2 td.vpt-glass-one,
body.btf-vpt-page .vpt-glass-table tr.is-max td.vpt-glass-five { font-weight: 700; color: var( --th-ink ); background: rgba( 154, 123, 60, .14 ); }
body.btf-vpt-page .vpt-glass-table td i { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: .45rem; border-radius: 50%; background: var( --gold ); color: #fff; font-family: var( --sans ); font-style: normal; font-size: .66rem; font-weight: 700; vertical-align: 1px; }
body.btf-vpt-page .vpt-read-steps { list-style: none; counter-reset: vpt; margin: 2.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
body.btf-vpt-page .vpt-read-steps li { counter-increment: vpt; position: relative; padding-left: 2.2rem; font-family: var( --sans ); font-size: .95rem; line-height: 1.65; color: var( --ink-2 ); }
body.btf-vpt-page .vpt-read-steps li::before { content: counter( vpt ); position: absolute; left: 0; top: .15rem; display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var( --gold ); color: #fff; font-size: .72rem; font-weight: 700; }
body.btf-vpt-page .vpt-read-steps b { color: var( --th-ink ); }

body.btf-vpt-page .vpt-read-list { border-top: 1px solid var( --line ); }
body.btf-vpt-page .vpt-read-row { display: grid; grid-template-columns: minmax( 0, 12rem ) minmax( 0, 1fr ) minmax( 0, 9.5rem ); gap: 1.4rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var( --line ); }
body.btf-vpt-page .vpt-read-head { padding: .6rem 0; }
body.btf-vpt-page .vpt-read-head span { font-family: var( --mono ); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); }
body.btf-vpt-page .vpt-read-game { font-family: var( --sans ); font-weight: 700; font-size: .98rem; color: var( --th-ink ); }
body.btf-vpt-page .vpt-read-lines { font-family: var( --sans ); font-size: .92rem; line-height: 1.55; color: var( --ink-2 ); }
body.btf-vpt-page .vpt-read-full { font-family: var( --mono ); font-size: .84rem; font-weight: 600; color: var( --forest ); text-align: right; }
body.btf-vpt-page .vpt-read-head span:last-child { text-align: right; }
body.btf-vpt-page .vpt-read-full i { font-style: normal; font-weight: 400; color: var( --muted ); margin-left: .35rem; }

body.btf-vpt-page .vpt-caution { border-left: 3px solid var( --gold ); padding: .25rem 0 .25rem 1.45rem; margin-top: 2rem; }
body.btf-vpt-page .btf-vpt-section .vpt-caution h3 { font-family: var( --sans ); font-weight: 700; font-size: 1.06rem; line-height: 1.4; color: var( --th-ink ); margin: 0 0 .5rem; }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-caution p { font-size: .95rem; max-width: 81ch; margin: 0; }

/* ── the checker ────────────────────────────────────────────────────────── */
body.btf-vpt-page .vpt-tool { background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); padding: 1.75rem; }
body.btf-vpt-page .vpt-tool-top { display: grid; grid-template-columns: minmax( 0, 15rem ) minmax( 0, 1fr ); gap: 1.4rem; align-items: start; }
body.btf-vpt-page .vpt-field { display: flex; flex-direction: column; gap: .45rem; font-family: var( --sans ); font-size: .84rem; color: var( --ink-2 ); min-width: 0; }
/* WebKit ignores min-height on a native select: give it a real height. */
body.btf-vpt-page .vpt-field select { width: 100%; height: 44px; box-sizing: border-box; padding: 0 .7rem; font: inherit; font-family: var( --sans ); font-size: .95rem; color: var( --th-ink ); background: #fff; border: 1px solid var( --line ); border-radius: 7px; }
body.btf-vpt-page .vpt-field select:focus { outline: 2px solid var( --gold ); outline-offset: 1px; }
body.btf-vpt-page .vpt-versions { display: flex; flex-wrap: wrap; gap: .5rem; }
body.btf-vpt-page .vpt-chip { font: inherit; font-family: var( --mono ); font-size: .84rem; color: var( --forest ); background: #fff; border: 1px solid var( --line ); border-radius: 6px; padding: 0 .9rem; height: 44px; box-sizing: border-box; cursor: pointer; }
body.btf-vpt-page .vpt-chip:hover { background: var( --cream ); }
body.btf-vpt-page .vpt-chip.on { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); font-weight: 600; }
body.btf-vpt-page .vpt-chip:focus-visible { outline: 2px solid var( --gold ); outline-offset: 2px; }

body.btf-vpt-page .vpt-result { display: grid; grid-template-columns: 11rem minmax( 0, 1fr ); gap: 1.6rem; align-items: start; border-top: 1px solid var( --line ); margin-top: 1.5rem; padding-top: 1.5rem; }
body.btf-vpt-page .vpt-result-fig b { display: block; font-family: var( --serif ); font-weight: 400; font-size: 3rem; line-height: 1.05; color: var( --forest ); font-variant-numeric: tabular-nums; }
body.btf-vpt-page .vpt-result-fig span { display: block; margin-top: .3rem; font-family: var( --sans ); font-size: .78rem; color: var( --muted ); }
body.btf-vpt-page .vpt-result-eyebrow { display: block; font-family: var( --mono ); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var( --gold ); margin-bottom: .45rem; }
body.btf-vpt-page .btf-vpt-section .vpt-result h3 { font-family: var( --serif ); font-weight: 400; font-size: 1.65rem; line-height: 1.2; color: var( --th-ink ); margin: 0 0 .6rem; }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-result p { font-size: .95rem; max-width: 72ch; margin: 0 0 .7rem; }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-result .vpt-result-reads { font-size: .86rem; color: var( --ink-2 ); margin: 0; }
body.btf-vpt-page .vpt-result-reads span { font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); margin-right: .4rem; }

/* ── what each line is worth (as the blackjack guides' ledger) ──────────── */
body.btf-vpt-page .vpt-ledger { border-top: 1px solid var( --line ); margin-top: .4rem; }
body.btf-vpt-page .vpt-rule { display: grid; grid-template-columns: minmax( 0, 1fr ) 8rem minmax( 0, 1.3fr ); gap: 1.8rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var( --line ); }
body.btf-vpt-page .btf-vpt-section .vpt-rule h3 { font-family: var( --sans ); font-weight: 700; font-size: 1.04rem; line-height: 1.4; color: var( --th-ink ); margin: 0 0 .35rem; }
body.btf-vpt-page .vpt-rule-impact { font-family: var( --mono ); font-size: .68rem; line-height: 1.7; color: var( --gold ); }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-rule .vpt-rule-cost { margin: 0; }
body.btf-vpt-page .vpt-rule-cost b { display: block; font-family: var( --serif ); font-weight: 400; font-size: 1.75rem; line-height: 1.05; color: var( --red ); font-variant-numeric: tabular-nums; }
body.btf-vpt-page .vpt-rule-cost span { font-family: var( --sans ); font-size: .74rem; color: var( --muted ); }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-rule .vpt-rule-note { font-size: .92rem; margin: 0; }

/* ── same name, different price ─────────────────────────────────────────── */
body.btf-vpt-page .vpt-names { border-top: 1px solid var( --line ); }
body.btf-vpt-page .vpt-names-row { display: grid; grid-template-columns: minmax( 0, 11rem ) minmax( 0, 9rem ) minmax( 0, 9rem ) 5rem minmax( 0, 1fr ); gap: 1.2rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var( --line ); }
body.btf-vpt-page .vpt-names-head { padding: .6rem 0; }
body.btf-vpt-page .vpt-names-head span { font-family: var( --mono ); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); }
body.btf-vpt-page .vpt-names-game { font-family: var( --sans ); font-weight: 700; font-size: .95rem; color: var( --th-ink ); }
body.btf-vpt-page .vpt-names-best,
body.btf-vpt-page .vpt-names-worst { font-family: var( --mono ); font-size: .82rem; color: var( --forest ); white-space: nowrap; }
body.btf-vpt-page .vpt-names-worst { color: var( --red ); }
body.btf-vpt-page .vpt-names-best i,
body.btf-vpt-page .vpt-names-worst i { font-style: normal; color: var( --muted ); margin-left: .3rem; }
body.btf-vpt-page .vpt-names-gap { font-family: var( --mono ); font-size: .84rem; font-weight: 700; color: var( --th-ink ); white-space: nowrap; }
body.btf-vpt-page .vpt-names-bar { position: relative; height: 14px; background: var( --cream-2 ); border-radius: 7px; }
body.btf-vpt-page .vpt-names-bar i { position: absolute; top: 5px; height: 4px; background: rgba( 154, 123, 60, .45 ); border-radius: 2px; }
body.btf-vpt-page .vpt-names-bar em { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var( --forest ); }
body.btf-vpt-page .vpt-names-bar u { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var( --red ); text-decoration: none; }

/* ── keep the strategy? ─────────────────────────────────────────────────── */
body.btf-vpt-page .vpt-cross { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1rem; margin-bottom: 1.8rem; }
body.btf-vpt-page .vpt-cross-card { padding: 1.3rem 1.4rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); border-left: 3px solid var( --gold ); }
body.btf-vpt-page .vpt-cross-card.is-fine { border-left-color: var( --forest-3 ); }
body.btf-vpt-page .vpt-cross-card.is-bad { border-left-color: var( --red ); }
body.btf-vpt-page .btf-vpt-section .vpt-cross-card h3 { font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var( --th-ink ); margin: 0 0 1rem; }
body.btf-vpt-page .vpt-cross-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body.btf-vpt-page .vpt-cross-figs b { display: block; font-family: var( --serif ); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var( --th-ink ); font-variant-numeric: tabular-nums; }
body.btf-vpt-page .vpt-cross-card.is-bad .vpt-cross-figs div:first-child b { color: var( --red ); }
body.btf-vpt-page .vpt-cross-card.is-fine .vpt-cross-figs div:first-child b { color: var( --forest ); }
body.btf-vpt-page .vpt-cross-figs span { display: block; margin-top: .3rem; font-family: var( --sans ); font-size: .76rem; line-height: 1.4; color: var( --muted ); }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-cross-card .vpt-cross-note { font-family: var( --mono ); font-size: .72rem; color: var( --muted ); margin: .9rem 0 0; }

/* ── questions ──────────────────────────────────────────────────────────── */
body.btf-vpt-page .vpt-faq details { border-bottom: 1px solid var( --hair ); }
body.btf-vpt-page .vpt-faq details:first-child { border-top: 1px solid var( --hair ); }
body.btf-vpt-page .vpt-faq summary { position: relative; list-style: none; cursor: pointer; font-family: var( --sans ); font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: var( --th-ink ); padding: 1.15rem 2.4rem 1.15rem 0; }
body.btf-vpt-page .vpt-faq summary::-webkit-details-marker { display: none; }
body.btf-vpt-page .vpt-faq summary::after { content: '+'; position: absolute; right: .2rem; top: .9rem; font-family: var( --serif ); font-size: 1.6rem; line-height: 1; color: var( --gold ); }
body.btf-vpt-page .vpt-faq details[open] summary::after { content: '\2212'; }
body.btf-vpt-page .btf-vpt-section .wrap .vpt-faq p { font-size: .95rem; max-width: 77ch; margin: 0 0 1.3rem; padding-right: 1.5rem; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	body.btf-vpt-page .vpt-names-row { grid-template-columns: minmax( 0, 1fr ) auto auto 4.6rem; }
	body.btf-vpt-page .vpt-names-bar { grid-column: 1 / -1; }
}
@media ( max-width: 800px ) {
	body.btf-vpt-page .btf-vpt-section { padding: 2.8rem 0 2.6rem; }
	body.btf-vpt-page .vpt-read-layout { grid-template-columns: 1fr; gap: 1.6rem; }
	body.btf-vpt-page .vpt-read-steps { margin-top: 0; }
	body.btf-vpt-page .vpt-rule { grid-template-columns: minmax( 0, 1fr ) 7rem; gap: .5rem 1.2rem; }
	body.btf-vpt-page .btf-vpt-section .wrap .vpt-rule .vpt-rule-note { grid-column: 1 / -1; }
	body.btf-vpt-page .vpt-cross { grid-template-columns: 1fr; }
}
@media ( max-width: 640px ) {
	body.btf-vpt-page .vpt-tool { padding: 1.2rem; }
	body.btf-vpt-page .vpt-tool-top { grid-template-columns: 1fr; gap: 1rem; }
	body.btf-vpt-page .vpt-result { grid-template-columns: 1fr; gap: .6rem; }
	body.btf-vpt-page .vpt-result-fig b { font-size: 2.6rem; }
	body.btf-vpt-page .vpt-read-row { grid-template-columns: minmax( 0, 1fr ) auto; gap: .3rem 1rem; }
	body.btf-vpt-page .vpt-read-lines { grid-column: 1 / -1; grid-row: 2; }
	body.btf-vpt-page .vpt-read-head span:nth-child( 2 ) { display: none; }
	body.btf-vpt-page .vpt-names-row { grid-template-columns: minmax( 0, 1fr ) auto; gap: .35rem 1rem; }
	body.btf-vpt-page .vpt-names-head { display: none; }
	body.btf-vpt-page .vpt-names-best,
	body.btf-vpt-page .vpt-names-worst { grid-column: 1; }
	body.btf-vpt-page .vpt-names-gap { grid-column: 2; grid-row: 1; text-align: right; }
}
@media ( max-width: 380px ) {
	body.btf-vpt-page .vpt-best { padding: 1.1rem 1rem .9rem; }
	body.btf-vpt-page .vpt-best-head,
	body.btf-vpt-page .vpt-best-row { grid-template-columns: minmax( 0, 1fr ) auto 4rem; gap: .6rem; }
	body.btf-vpt-page .vpt-best-game { font-size: .84rem; }
	body.btf-vpt-page .vpt-glass-table tbody th,
	body.btf-vpt-page .vpt-glass-table td { padding: .5rem .5rem; }
	body.btf-vpt-page .vpt-tool { padding: 1rem; }
}
@media ( pointer: coarse ) {
	body.btf-vpt-page .vpt-field select { font-size: 16px; }
	body.btf-vpt-page .vpt-faq summary { min-height: 44px; }
}