/* ── Blackjack Rules — scoped page styles ────────────────────────────────
   /blackjack/rules/, scoped under body.btf-bjr-page.

   Follows rules-page.css (the poker rules page) rather than inventing:
   same section rhythm, same eyebrow spacing, same hero chrome.

   Type discipline — the thing this page got wrong first time round:
     serif  → headings only (.btf-th-display) plus two display figures
     Outfit → all body copy, all component text, all card labels
     mono   → eyebrows, micro-labels, table figures
   Nothing else invents a face or a size.

   NOTE: do NOT alias --ink — base.css defines it at root and texas-holdem.css
   maps --th-ink onto it; re-declaring here makes a circular reference.
   ──────────────────────────────────────────────────────────────────────── */

body.btf-bjr-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 );
	--cream-3:   var( --th-cream-3 );
	--ink-2:     var( --th-ink-2 );
	--muted:     var( --th-muted );
	--hair:      var( --th-hair );
	--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-bjr-page .btf-bjr-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
body.btf-bjr-page .btf-bjr-hero-viz { display: flex; flex-direction: column; gap: 1rem; }
body.btf-bjr-page .btf-bjr-hero-viz-title {
	font-family: var( --mono ); font-size: .68rem; letter-spacing: .11em;
	text-transform: uppercase; color: var( --gold-soft );
}
body.btf-bjr-page .btf-bjr-facts { margin: 0; padding: 1.3rem 1.5rem; background: rgba( 244, 239, 230, .06 ); border: 1px solid rgba( 244, 239, 230, .15 ); border-radius: var( --radius-lg ); }
body.btf-bjr-page .btf-bjr-facts dt { font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 244, 239, 230, .5 ); }
body.btf-bjr-page .btf-bjr-facts dd { margin: .2rem 0 1rem; font-family: var( --sans ); font-size: .95rem; line-height: 1.5; color: rgba( 244, 239, 230, .88 ); }
body.btf-bjr-page .btf-bjr-facts dd:last-child { margin-bottom: 0; }

/* ── section rhythm — same numbers as rules-page.css ────────────────────── */
body.btf-bjr-page .btf-bjr-section { padding: 4rem 0 3rem; scroll-margin-top: 80px; }
@media ( max-width: 800px ) { body.btf-bjr-page .btf-bjr-section { padding: 3rem 0 2rem; } }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) { background: var( --cream-2 ); }
body.btf-bjr-page .btf-bjr-section > .wrap > .btf-th-eyebrow,
body.btf-bjr-page .wrap > .btf-th-eyebrow { margin-bottom: .9rem; }
body.btf-bjr-page .btf-bjr-section h2.btf-th-display { margin: 0 0 .55em; font-size: clamp( 1.7rem, 3.4vw, 2.4rem ); }
body.btf-bjr-page .btf-bjr-section h3.btf-th-display { margin: 2.4rem 0 .6em; font-size: clamp( 1.2rem, 1.9vw, 1.5rem ); }
body.btf-bjr-page .btf-bjr-section .btf-th-lede { margin: 0 0 2rem; color: var( --ink-2 ); }

/* Paragraphs need explicit rhythm: base.css's .section-paper > .wrap
   p:not([class]) rule wins at (0,3,1) and sets no bottom margin, so runs of
   prose ran together. Three classes to outrank it. */
body.btf-bjr-page .btf-bjr-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-bjr-page .btf-bjr-section .wrap p:last-child { margin-bottom: 0; }
body.btf-bjr-page .btf-bjr-section .wrap .bjr-note { font-size: .88rem; line-height: 1.65; color: var( --muted ); margin-top: 1.6rem; }
body.btf-bjr-page .btf-bjr-section .wrap p a { color: var( --forest ); font-weight: 600; }

/* ── shared small pieces ────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-label { display: block; font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); margin-bottom: .5rem; }
body.btf-bjr-page .bjr-panel { padding: 1.4rem 1.5rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-panel { background: var( --cream ); }
body.btf-bjr-page .bjr-panel-title { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .45rem; }

/* ── the object ─────────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-object-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.6rem; }
body.btf-bjr-page .bjr-object-card { padding: 1.4rem 1.5rem; border-radius: var( --radius-lg ); border: 1px solid var( --hair ); background: var( --cream-2 ); border-left: 3px solid var( --muted ); }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-object-card { background: var( --cream ); }
body.btf-bjr-page .bjr-object-card.is-wrong { border-left-color: var( --red ); }
body.btf-bjr-page .bjr-object-card.is-right { border-left-color: var( --forest-3 ); }
body.btf-bjr-page .btf-bjr-section .bjr-object-line { font-weight: 700; color: var( --th-ink ); }

/* ── card values ────────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-cards-list { display: flex; flex-direction: column; }
body.btf-bjr-page .bjr-cards-row { display: grid; grid-template-columns: minmax( 0, 21rem ) 1fr; gap: 1.6rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-cards-row:last-child { border-bottom: none; }
body.btf-bjr-page .bjr-cards-faces { display: flex; flex-wrap: wrap; gap: .3rem; }
body.btf-bjr-page .bjr-card {
	width: 1.95rem; height: 2.7rem; background: #fff; border-radius: 5px;
	display: flex; align-items: center; justify-content: center;
	font-family: var( --sans ); font-weight: 600; font-size: .92rem; color: var( --th-ink );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .12 ), inset 0 0 0 1px rgba( 0, 0, 0, .07 );
}
body.btf-bjr-page .bjr-cards-meaning b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .25rem; }
body.btf-bjr-page .btf-bjr-section .bjr-cards-meaning p { margin: 0; font-size: .95rem; }

body.btf-bjr-page .bjr-softhard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
body.btf-bjr-page .bjr-softhard-card b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .4rem; }
body.btf-bjr-page .btf-bjr-section .bjr-softhard-card p { margin: 0; font-size: .95rem; }

/* ── the sequence ───────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
body.btf-bjr-page .bjr-flow-step { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.15rem 1.4rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); margin: 0; }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-flow-step { background: var( --cream ); }
body.btf-bjr-page .bjr-flow-step.is-key { border-color: var( --gold ); border-left: 3px solid var( --gold ); }
body.btf-bjr-page .bjr-flow-n { font-family: var( --mono ); font-size: .85rem; font-weight: 600; color: var( --gold ); padding-top: .18rem; }
body.btf-bjr-page .bjr-flow-body b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .3rem; }
body.btf-bjr-page .btf-bjr-section .bjr-flow-body p { margin: 0; font-size: .95rem; }
body.btf-bjr-page .bjr-flow-flag { display: inline-block; margin-top: .85rem; font-family: var( --mono ); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: var( --cream ); background: var( --forest ); padding: .3rem .7rem; border-radius: 20px; }

/* ── your options ───────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-actions { display: grid; grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) ); gap: 1rem; }
body.btf-bjr-page .bjr-action { padding: 1.3rem 1.4rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-action { background: var( --cream ); }
body.btf-bjr-page .bjr-action { display: flex; flex-direction: column; }
body.btf-bjr-page .bjr-action-name { font-family: var( --sans ); font-weight: 700; font-size: 1.2rem; color: var( --th-ink ); }
body.btf-bjr-page .btf-bjr-section .bjr-action-what { margin: .3rem 0 1rem; font-size: .95rem; line-height: 1.5; color: var( --ink-2 ); }

/* The line a skimmer actually wants, lifted out of the list and tinted. */
body.btf-bjr-page .bjr-action-use { padding: .85rem 1rem; background: rgba( 27, 58, 45, .05 ); border-left: 2px solid var( --forest-3 ); border-radius: 0 var( --radius ) var( --radius ) 0; margin-bottom: 1rem; }
body.btf-bjr-page .bjr-action-use .bjr-label { color: var( --forest ); margin-bottom: .3rem; }
body.btf-bjr-page .btf-bjr-section .bjr-action-use p { margin: 0; font-size: .92rem; line-height: 1.55; color: var( --th-ink ); }

body.btf-bjr-page .bjr-action-meta { margin: auto 0 0; display: grid; grid-template-columns: 4.6rem 1fr; gap: .3rem .8rem; padding-top: .85rem; border-top: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-action-meta dt { font-family: var( --mono ); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); padding-top: .18rem; }
body.btf-bjr-page .bjr-action-meta dd { margin: 0; font-family: var( --sans ); font-size: .85rem; line-height: 1.45; color: var( --muted ); }

body.btf-bjr-page .bjr-insurance { margin-top: 2.2rem; padding: 1.5rem 1.7rem; background: var( --forest ); border-radius: var( --radius-lg ); }
body.btf-bjr-page .bjr-insurance .bjr-label { color: var( --gold-soft ); }
body.btf-bjr-page .bjr-insurance h3.btf-th-display { color: var( --cream ); margin-top: 0; }
body.btf-bjr-page .btf-bjr-section .bjr-insurance p { color: rgba( 244, 239, 230, .8 ); }
body.btf-bjr-page .btf-bjr-section .bjr-insurance p b { color: var( --cream ); }

/* ── the dealer ─────────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-dealer-rule { display: grid; grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) ); gap: 1rem; margin-bottom: 2rem; }
body.btf-bjr-page .bjr-rule-card { padding: 1.2rem 1.3rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-rule-card { background: var( --cream ); }
body.btf-bjr-page .bjr-rule-card.is-var { border-style: dashed; border-color: var( --gold ); }
body.btf-bjr-page .bjr-rule-card b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .25rem; }
body.btf-bjr-page .bjr-rule-card span { font-family: var( --sans ); font-size: .92rem; line-height: 1.55; color: var( --ink-2 ); }

body.btf-bjr-page .bjr-table-scroll { overflow-x: auto; margin: 1.6rem 0; }
body.btf-bjr-page .bjr-dealer-table,
body.btf-bjr-page .bjr-varies-table { width: 100%; border-collapse: collapse; font-family: var( --sans ); }
body.btf-bjr-page .bjr-dealer-table { min-width: 38rem; }
body.btf-bjr-page .bjr-varies-table { min-width: 36rem; }
body.btf-bjr-page .bjr-dealer-table caption { text-align: left; font-size: .85rem; line-height: 1.55; color: var( --muted ); padding-bottom: .9rem; }
body.btf-bjr-page .bjr-dealer-table thead th,
body.btf-bjr-page .bjr-varies-table thead th { font-family: var( --mono ); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: rgba( 244, 239, 230, .85 ); font-weight: 600; padding: .7rem .8rem; border: none; }
body.btf-bjr-page .bjr-dealer-table thead th { text-align: right; }
body.btf-bjr-page .bjr-dealer-table thead th:first-child,
body.btf-bjr-page .bjr-varies-table thead th { text-align: left; }
body.btf-bjr-page .bjr-dealer-table tbody th { text-align: left; font-family: var( --sans ); font-weight: 700; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var( --th-ink ); width: 4.5rem; padding: .65rem .8rem; border-bottom: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-dealer-table td { font-family: var( --mono ); font-size: .84rem; color: var( --ink-2 ); text-align: right; padding: .65rem .8rem; border-bottom: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-dealer-table tr.is-weak { background: rgba( 154, 123, 60, .06 ); }
body.btf-bjr-page .bjr-bust-cell { font-weight: 700; color: var( --th-ink ); }

/* ── getting paid ───────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-outcomes { display: flex; flex-direction: column; margin-bottom: 1rem; }
body.btf-bjr-page .bjr-outcome { display: grid; grid-template-columns: 1fr 8rem 1.4fr; gap: 1.2rem; align-items: baseline; padding: .9rem .8rem; border-bottom: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-outcome-r { font-family: var( --sans ); font-weight: 600; font-size: .98rem; color: var( --th-ink ); }
body.btf-bjr-page .bjr-outcome-p { font-family: var( --mono ); font-size: .8rem; color: var( --forest ); }
body.btf-bjr-page .bjr-outcome.is-good .bjr-outcome-p { font-weight: 700; }
body.btf-bjr-page .bjr-outcome.is-bad .bjr-outcome-p { color: var( --red ); }
body.btf-bjr-page .bjr-outcome-ex { font-family: var( --sans ); font-size: .88rem; line-height: 1.5; color: var( --muted ); }

body.btf-bjr-page .bjr-payout-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.4rem 0; }
body.btf-bjr-page .bjr-pay { padding: 1.3rem 1.4rem; border-radius: var( --radius-lg ); border: 1px solid var( --hair ); background: var( --cream-2 ); }
body.btf-bjr-page .btf-bjr-section:nth-of-type( even ) .bjr-pay { background: var( --cream ); }
body.btf-bjr-page .bjr-pay.is-good { border-color: var( --gold ); }
body.btf-bjr-page .bjr-pay.is-bad { border-color: rgba( 139, 45, 45, .3 ); }
body.btf-bjr-page .bjr-pay b { display: block; font-family: var( --serif ); font-size: 2.2rem; line-height: 1; color: var( --forest ); }
body.btf-bjr-page .bjr-pay.is-bad b { color: var( --red ); }
body.btf-bjr-page .bjr-pay-note { display: block; margin-top: .45rem; font-family: var( --sans ); font-size: .85rem; line-height: 1.45; color: var( --muted ); }

/* ── what varies ────────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-varies-table tbody th { text-align: left; padding: .95rem .8rem; font-family: var( --sans ); font-weight: 700; font-size: .98rem; text-transform: none; letter-spacing: 0; color: var( --th-ink ); border-bottom: 1px solid var( --hair ); vertical-align: top; }
body.btf-bjr-page .bjr-varies-table td { padding: .95rem .8rem; font-family: var( --sans ); font-size: .92rem; border-bottom: 1px solid var( --hair ); vertical-align: top; color: var( --ink-2 ); }
body.btf-bjr-page .bjr-varies-note { display: block; margin-top: .3rem; font-weight: 400; font-size: .85rem; line-height: 1.5; color: var( --muted ); }
body.btf-bjr-page .bjr-varies-table td.is-good { color: var( --forest ); font-weight: 600; }
body.btf-bjr-page .bjr-varies-table td.is-bad { color: var( --red ); }
body.btf-bjr-page .bjr-varies-cost { font-family: var( --mono ); font-size: .86rem; color: var( --th-ink ); font-weight: 700; white-space: nowrap; }

/* ── mistakes ───────────────────────────────────────────────────────────── */
body.btf-bjr-page .bjr-myths { display: flex; flex-direction: column; }
body.btf-bjr-page .bjr-myth { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.6rem; padding: 1.3rem 0; border-bottom: 1px solid var( --hair ); }
body.btf-bjr-page .bjr-myth:last-child { border-bottom: none; }
body.btf-bjr-page .bjr-myth-claim { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
body.btf-bjr-page .bjr-myth-n { font-family: var( --serif ); font-size: 2.3rem; line-height: .85; color: var( --gold ); }
body.btf-bjr-page .btf-bjr-section .bjr-myth-claim p { font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; line-height: 1.45; color: var( --th-ink ); margin: 0; }
body.btf-bjr-page .btf-bjr-section .bjr-myth-real p { margin: 0; font-size: .95rem; }

/* ── selection on the dark blocks ───────────────────────────────────────── */
body.btf-bjr-page .bjr-insurance ::selection,
body.btf-bjr-page .bjr-flow-step.is-key ::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	body.btf-bjr-page .bjr-object-grid,
	body.btf-bjr-page .bjr-softhard-grid,
	body.btf-bjr-page .bjr-payout-compare { grid-template-columns: 1fr; }
	body.btf-bjr-page .bjr-myth { grid-template-columns: 1fr; gap: .7rem; }
	body.btf-bjr-page .bjr-outcome { grid-template-columns: 1fr 7rem; }
	body.btf-bjr-page .bjr-outcome-ex { grid-column: 1 / -1; }
}
@media ( max-width: 620px ) {
	body.btf-bjr-page .bjr-cards-row { grid-template-columns: 1fr; gap: .8rem; }
	body.btf-bjr-page .bjr-flow-step { padding: 1.1rem 1.1rem; }
}