/* ── Basic Strategy — scoped page styles ─────────────────────────────────
   /blackjack/strategy/basic-strategy/, scoped under body.btf-bst-page.

   Same conventions as blackjack-soft-hard-page.css / blackjack-rules-page.css:
   section rhythm and eyebrow spacing from rules-page.css, hero chrome shared,
   and the type discipline —
     serif  → headings and display figures only
     Outfit → all body and component text
     mono   → eyebrows, micro-labels, table figures

   NOTE: do NOT alias --ink (circular with texas-holdem's --th-ink).
   ──────────────────────────────────────────────────────────────────────── */

body.btf-bst-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 );
	--act-hit: var( --red ); --act-stand: var( --forest ); --act-double: #92700A; --act-split: #1A3A6B;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
body.btf-bst-page .btf-bst-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
body.btf-bst-page .btf-bst-hero-viz { display: flex; flex-direction: column; gap: .8rem; }

/* the strategy at a glance — a two-column grid on the felt. Chips use the same
   action colours as the tables below and the calculators; stand is lifted to
   the lighter felt so it reads against the hero. */
body.btf-bst-page .btf-bst-glance { padding: 1.1rem 1.2rem 1rem; background: rgba( 244, 239, 230, .06 ); border: 1px solid rgba( 244, 239, 230, .15 ); border-radius: var( --radius-lg ); }
body.btf-bst-page .btf-bst-glance-head { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: .5rem; padding: 0 .1rem .55rem; border-bottom: 1px solid rgba( 244, 239, 230, .14 ); margin-bottom: .35rem; }
body.btf-bst-page .btf-bst-glance-head span { font-family: var( --mono ); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 244, 239, 230, .55 ); }
body.btf-bst-page .btf-bst-glance-head span + span { text-align: center; }
/* the hero sits inside .prose, so base.css's table styling and the
   table-scroll-wrap div the theme injects around every <table> both reach in
   here and paint a light panel under the grid. Neutralise them. */
body.btf-bst-page .btf-bst-glance .table-scroll-wrap { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; overflow: visible; }
body.btf-bst-page .btf-bst-glance .table-scroll-wrap table { margin: 0; }
body.btf-bst-page .btf-bst-glance-table,
body.btf-bst-page .btf-bst-glance-table tbody,
body.btf-bst-page .btf-bst-glance-table tr { background: transparent; box-shadow: none; }
/* base.css zebra-stripes .prose table body rows (surface / white) with an
   :nth-child() selector that outranks a plain `tr`; match it with the same
   pseudo-class and one more ancestor so every row stays on the felt. */
body.btf-bst-page .btf-bst-glance .btf-bst-glance-table tbody tr:nth-child(n),
body.btf-bst-page .btf-bst-glance .btf-bst-glance-table tbody tr:nth-child(n) th,
body.btf-bst-page .btf-bst-glance .btf-bst-glance-table tbody tr:nth-child(n) td { background: transparent; }
body.btf-bst-page .btf-bst-glance-table { width: 100%; border-collapse: collapse; border: none; border-radius: 0; overflow: visible; }
body.btf-bst-page .btf-bst-glance-table th,
body.btf-bst-page .btf-bst-glance-table td { padding: .38rem .1rem; border: none; border-bottom: 1px solid rgba( 244, 239, 230, .08 ); background: transparent; }
body.btf-bst-page .btf-bst-glance-table tr:last-child th, body.btf-bst-page .btf-bst-glance-table tr:last-child td { border-bottom: none; }
body.btf-bst-page .btf-bst-glance-table th[scope="row"] { width: 42%; text-align: left; font-family: var( --sans ); font-weight: 600; font-size: .84rem; text-transform: none; letter-spacing: 0; color: rgba( 244, 239, 230, .9 ); white-space: nowrap; }
body.btf-bst-page .btf-bst-glance-table th sup { font-size: .6em; color: var( --gold-soft ); margin-left: .1rem; }
body.btf-bst-page .btf-bst-glance-table td { text-align: center; }
body.btf-bst-page .bst-chip { display: inline-block; min-width: 4.6rem; font-family: var( --mono ); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .22rem .5rem; border-radius: 4px; }
body.btf-bst-page .bst-chip.c-hit { background: var( --act-hit ); }
body.btf-bst-page .bst-chip.c-stand { background: #3A7057; }
body.btf-bst-page .bst-chip.c-double { background: var( --act-double ); }
body.btf-bst-page .bst-chip.c-split { background: var( --act-split ); }
body.btf-bst-page .bst-chip.c-never { background: rgba( 244, 239, 230, .18 ); color: rgba( 244, 239, 230, .85 ); }
body.btf-bst-page .btf-bst-glance-note { margin: .8rem 0 0; font-family: var( --sans ); font-size: .74rem; line-height: 1.5; color: rgba( 244, 239, 230, .55 ); }
body.btf-bst-page .btf-bst-hero-viz-title { font-family: var( --mono ); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var( --gold-soft ); }

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

/* base.css's .section-paper > .wrap p:not([class]) wins at (0,3,1) and sets no
   bottom margin; three classes here to outrank it and give prose its rhythm. */
body.btf-bst-page .btf-bst-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-bst-page .btf-bst-section .wrap p:last-child { margin-bottom: 0; }
body.btf-bst-page .btf-bst-section .wrap p b { color: var( --th-ink ); }
body.btf-bst-page .btf-bst-section .wrap .bst-note { font-size: .88rem; line-height: 1.65; color: var( --muted ); margin-top: 1.6rem; }
body.btf-bst-page .btf-bst-section .wrap p a { color: var( --forest ); font-weight: 600; }
body.btf-bst-page .btf-bst-section .wrap .bst-fallback { padding: 1rem 1.2rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius ); font-size: .95rem; }
body.btf-bst-page .btf-bst-section:nth-of-type( even ) .wrap .bst-fallback { background: var( --cream ); }

/* ── shared small pieces ────────────────────────────────────────────────── */
body.btf-bst-page .bst-label { display: block; font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); margin-bottom: .5rem; }
body.btf-bst-page .bst-panel, body.btf-bst-page .bst-not, body.btf-bst-page .bst-stage, body.btf-bst-page .bst-step { background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bst-page .btf-bst-section:nth-of-type( even ) .bst-not,
body.btf-bst-page .btf-bst-section:nth-of-type( even ) .bst-stage,
body.btf-bst-page .btf-bst-section:nth-of-type( even ) .bst-step { background: var( --cream ); }

/* what it is not */
body.btf-bst-page .bst-nots { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; margin-top: 2rem; }
body.btf-bst-page .bst-not { padding: 1.3rem 1.4rem; border-top: 3px solid var( --red ); }
body.btf-bst-page .bst-not b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; color: var( --th-ink ); margin-bottom: .4rem; }
body.btf-bst-page .btf-bst-section .wrap .bst-not p { margin: 0; font-size: .92rem; line-height: 1.55; }

/* the value comparison (JS) */
body.btf-bst-page .bst-policies { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; }
body.btf-bst-page .bst-policy { padding: 1.3rem 1.4rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); border-top: 3px solid var( --red ); }
body.btf-bst-page .btf-bst-section:nth-of-type( even ) .bst-policy { background: var( --cream ); }
body.btf-bst-page .bst-policy.is-best { border-top-color: var( --forest-3 ); }
body.btf-bst-page .bst-policy-name { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; color: var( --th-ink ); }
body.btf-bst-page .bst-policy-how { display: block; font-family: var( --sans ); font-size: .84rem; line-height: 1.45; color: var( --muted ); margin: .2rem 0 .9rem; }
body.btf-bst-page .bst-policy-edge { display: block; font-family: var( --serif ); font-size: 2.2rem; line-height: 1; color: var( --red ); }
body.btf-bst-page .bst-policy.is-best .bst-policy-edge { color: var( --forest ); }
body.btf-bst-page .bst-policy-sub { display: block; font-family: var( --mono ); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); margin-top: .3rem; }
body.btf-bst-page .bst-policy-money { display: block; font-family: var( --sans ); font-size: .9rem; line-height: 1.5; color: var( --ink-2 ); margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var( --hair ); }
body.btf-bst-page .bst-policy-money b { color: var( --th-ink ); }
body.btf-bst-page .btf-bst-section .wrap .bst-cap { font-size: .85rem; line-height: 1.6; color: var( --muted ); margin: 1rem 0 0; }

/* the order of the questions */
body.btf-bst-page .bst-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
body.btf-bst-page .bst-step { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.15rem 1.4rem; margin: 0; }
body.btf-bst-page .bst-step-n { font-family: var( --mono ); font-size: .85rem; font-weight: 600; color: var( --gold ); padding-top: .18rem; }
body.btf-bst-page .bst-step-body b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .3rem; }
body.btf-bst-page .btf-bst-section .wrap .bst-step-body p { margin: 0; font-size: .95rem; }

/* the costly decisions (JS table) */
body.btf-bst-page .bst-table-scroll { overflow-x: auto; margin: 1.4rem 0; }
body.btf-bst-page .bst-table { width: 100%; border-collapse: collapse; font-family: var( --sans ); min-width: 40rem; }
body.btf-bst-page .bst-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; text-align: left; }
body.btf-bst-page .bst-table tbody th { text-align: left; font-family: var( --sans ); font-weight: 700; font-size: .96rem; text-transform: none; letter-spacing: 0; color: var( --th-ink ); padding: .65rem .8rem; border-bottom: 1px solid var( --hair ); white-space: nowrap; }
body.btf-bst-page .bst-table td { font-family: var( --sans ); font-size: .92rem; color: var( --ink-2 ); padding: .65rem .8rem; border-bottom: 1px solid var( --hair ); vertical-align: middle; }
body.btf-bst-page .bst-act { display: inline-block; font-family: var( --mono ); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .2rem .5rem; border-radius: 4px; margin-right: .5rem; min-width: 4.4rem; text-align: center; }
body.btf-bst-page .a-hit { background: var( --act-hit ); } body.btf-bst-page .a-stand { background: var( --act-stand ); }
body.btf-bst-page .a-double { background: var( --act-double ); } body.btf-bst-page .a-split { background: var( --act-split ); }
body.btf-bst-page .bst-ev { font-family: var( --mono ); font-size: .82rem; color: var( --muted ); }
body.btf-bst-page .bst-table td.bst-gap { font-family: var( --mono ); font-size: .9rem; font-weight: 700; color: var( --th-ink ); white-space: nowrap; }
body.btf-bst-page .bst-table tr.is-big td.bst-gap { color: var( --red ); }
body.btf-bst-page .bst-table tr.is-small td.bst-gap { color: var( --muted ); font-weight: 400; }

/* learning stages */
body.btf-bst-page .bst-stages { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; margin-bottom: .5rem; }
body.btf-bst-page .bst-stage { padding: 1.3rem 1.4rem; border-top: 3px solid var( --forest-3 ); }
body.btf-bst-page .bst-stage b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .4rem; }
body.btf-bst-page .btf-bst-section .wrap .bst-stage p { margin: 0; font-size: .92rem; line-height: 1.55; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	body.btf-bst-page .bst-nots, body.btf-bst-page .bst-policies, body.btf-bst-page .bst-stages { grid-template-columns: 1fr; }
}