/* ── Soft vs Hard Hands — scoped page styles ─────────────────────────────
   /blackjack/strategy/soft-vs-hard-hands/, scoped under body.btf-svh-page.

   Same conventions as blackjack-rules-page.css, which follows rules-page.css:
   section rhythm, eyebrow spacing, hero chrome, and the type discipline —
     serif  → headings and the two 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-svh-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 );
	/* action colours match both calculators and the hub chart exactly */
	--act-hit: var( --red ); --act-stand: var( --forest ); --act-double: #92700A; --act-split: #1A3A6B;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
body.btf-svh-page .btf-svh-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
body.btf-svh-page .btf-svh-hero-viz { display: flex; flex-direction: column; gap: 1rem; }
body.btf-svh-page .btf-svh-hero-viz-title { font-family: var( --mono ); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var( --gold-soft ); }
body.btf-svh-page .btf-svh-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-svh-page .btf-svh-facts dt { font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 244, 239, 230, .5 ); }
body.btf-svh-page .btf-svh-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-svh-page .btf-svh-facts dd:last-child { margin-bottom: 0; }

/* ── section rhythm — same numbers as rules-page.css ────────────────────── */
body.btf-svh-page .btf-svh-section { padding: 4rem 0 3rem; scroll-margin-top: 80px; }
@media ( max-width: 800px ) { body.btf-svh-page .btf-svh-section { padding: 3rem 0 2rem; } }
body.btf-svh-page .btf-svh-section:nth-of-type( even ) { background: var( --cream-2 ); }
body.btf-svh-page .btf-svh-section > .wrap > .btf-th-eyebrow,
body.btf-svh-page .wrap > .btf-th-eyebrow { margin-bottom: .9rem; }
body.btf-svh-page .btf-svh-section h2.btf-th-display { margin: 0 0 .55em; font-size: clamp( 1.7rem, 3.4vw, 2.4rem ); }
body.btf-svh-page .btf-svh-section h3.btf-th-display { margin: 2.4rem 0 .6em; font-size: clamp( 1.2rem, 1.9vw, 1.5rem ); }
body.btf-svh-page .btf-svh-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-svh-page .btf-svh-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-svh-page .btf-svh-section .wrap p:last-child { margin-bottom: 0; }
body.btf-svh-page .btf-svh-section .wrap p b { color: var( --th-ink ); }
body.btf-svh-page .btf-svh-section .wrap .svh-note { font-size: .88rem; line-height: 1.65; color: var( --muted ); margin-top: 1.6rem; }
body.btf-svh-page .btf-svh-section .wrap p a { color: var( --forest ); font-weight: 600; }
body.btf-svh-page .btf-svh-section .wrap .svh-fallback { padding: 1rem 1.2rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius ); font-size: .95rem; }
body.btf-svh-page .btf-svh-section:nth-of-type( even ) .wrap .svh-fallback { background: var( --cream ); }

/* ── worked examples ────────────────────────────────────────────────────── */
body.btf-svh-page .svh-examples { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; margin: 1.8rem 0; }
body.btf-svh-page .svh-example { padding: 1.3rem 1.4rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); border-top: 3px solid var( --forest-3 ); }
body.btf-svh-page .btf-svh-section:nth-of-type( even ) .svh-example { background: var( --cream ); }
body.btf-svh-page .svh-example.is-hard { border-top-color: var( --red ); }
body.btf-svh-page .svh-example.is-went-hard { border-top-color: var( --gold ); }
body.btf-svh-page .svh-cards { display: flex; gap: .3rem; margin-bottom: .9rem; }
body.btf-svh-page .svh-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-svh-page .svh-example-name { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.05rem; color: var( --th-ink ); margin-bottom: .3rem; }
body.btf-svh-page .btf-svh-section .wrap .svh-example-note { margin: 0; font-size: .92rem; line-height: 1.55; }

/* ── tables (comparison, bust, soft grid) ───────────────────────────────── */
body.btf-svh-page .svh-table-scroll { overflow-x: auto; margin: 1.4rem 0; }
body.btf-svh-page .svh-table { width: 100%; border-collapse: collapse; font-family: var( --sans ); min-width: 34rem; }
body.btf-svh-page .svh-table caption { text-align: left; font-size: .85rem; line-height: 1.55; color: var( --muted ); padding-bottom: .9rem; }
/* base.css gives .prose table thead a felt background with cream text; adopt
   it rather than override only the colour (that put grey on dark green). */
body.btf-svh-page .svh-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-svh-page .svh-table tbody th { text-align: left; font-family: var( --sans ); font-weight: 700; font-size: .98rem; text-transform: none; letter-spacing: 0; color: var( --th-ink ); padding: .65rem .8rem; border-bottom: 1px solid var( --hair ); }
body.btf-svh-page .svh-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-svh-page .svh-table td.svh-num { font-family: var( --mono ); font-size: .86rem; color: var( --th-ink ); white-space: nowrap; }

/* bust bars */
body.btf-svh-page .svh-bar { width: 45%; }
body.btf-svh-page .svh-bar span { display: block; height: 8px; background: var( --hair ); border-radius: 4px; overflow: hidden; }
body.btf-svh-page .svh-bar i { display: block; height: 100%; background: var( --red ); border-radius: 4px; }
body.btf-svh-page .svh-bust-table tr.is-soft { background: rgba( 27, 58, 45, .06 ); }
body.btf-svh-page .svh-bust-table tr.is-soft th, body.btf-svh-page .svh-bust-table tr.is-soft td.svh-num { color: var( --forest ); }

/* comparison */
body.btf-svh-page .svh-cmp-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
body.btf-svh-page .svh-cmp-tab { font: inherit; font-family: var( --sans ); font-size: .85rem; padding: .5rem .9rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius ); cursor: pointer; color: var( --ink-2 ); transition: all .12s; }
body.btf-svh-page .svh-cmp-tab:hover { border-color: var( --forest ); }
body.btf-svh-page .svh-cmp-tab.active { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); font-weight: 600; }
body.btf-svh-page .svh-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-svh-page .a-hit { background: var( --act-hit ); } body.btf-svh-page .a-stand { background: var( --act-stand ); }
body.btf-svh-page .a-double { background: var( --act-double ); } body.btf-svh-page .a-split { background: var( --act-split ); }
body.btf-svh-page .svh-ev { font-family: var( --mono ); font-size: .82rem; color: var( --muted ); }
body.btf-svh-page .svh-cmp-table tr.is-diff th { color: var( --forest ); }
body.btf-svh-page .svh-cmp-table td.svh-gap { font-family: var( --mono ); font-size: .84rem; font-weight: 700; color: var( --forest ); white-space: nowrap; }
body.btf-svh-page .svh-cmp-table td.svh-gap.is-zero { color: var( --muted ); font-weight: 400; }
body.btf-svh-page .btf-svh-section .wrap .svh-cap { font-size: .85rem; line-height: 1.6; color: var( --muted ); margin: 0 0 1.4rem; }

/* soft-total grid — same cell language as the hub chart and the calculator */
body.btf-svh-page .svh-grid { width: 100%; border-collapse: separate; border-spacing: 2px; min-width: 30rem; }
body.btf-svh-page .svh-grid th { font-family: var( --mono ); font-size: .68rem; font-weight: 600; color: var( --ink-2 ); padding: .35rem; text-transform: none; letter-spacing: 0; }
body.btf-svh-page .svh-grid thead th { background: var( --cream-3 ); border-radius: 4px; color: var( --ink-2 ); text-align: center; }
body.btf-svh-page .svh-grid tbody th { text-align: left; }
body.btf-svh-page .svh-grid td { text-align: center; padding: .42rem .2rem; border-radius: 4px; }
body.btf-svh-page .svh-grid td abbr { font-family: var( --mono ); font-size: .74rem; font-weight: 700; color: #fff; text-decoration: none; border: 0; cursor: help; }
body.btf-svh-page .svh-grid .c-hit { background: var( --act-hit ); } body.btf-svh-page .svh-grid .c-stand { background: var( --act-stand ); }
body.btf-svh-page .svh-grid .c-double { background: var( --act-double ); } body.btf-svh-page .svh-grid .c-split { background: var( --act-split ); }
body.btf-svh-page .svh-key { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .9rem 0 0; font-family: var( --mono ); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var( --muted ); }
body.btf-svh-page .svh-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
body.btf-svh-page .svh-key .k-hit { background: var( --act-hit ); } body.btf-svh-page .svh-key .k-stand { background: var( --act-stand ); }
body.btf-svh-page .svh-key .k-double { background: var( --act-double ); }

/* ── rules of thumb ─────────────────────────────────────────────────────── */
body.btf-svh-page .svh-rules { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; margin: 2rem 0 1.4rem; }
body.btf-svh-page .svh-rule { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: 1.2rem 1.3rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-svh-page .btf-svh-section:nth-of-type( even ) .svh-rule { background: var( --cream ); }
body.btf-svh-page .svh-rule-n { font-family: var( --serif ); font-size: 1.9rem; line-height: .9; color: var( --gold ); }
body.btf-svh-page .svh-rule b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1rem; color: var( --th-ink ); margin-bottom: .35rem; }
body.btf-svh-page .btf-svh-section .wrap .svh-rule p { margin: 0; font-size: .9rem; line-height: 1.55; }

/* ── mistakes ───────────────────────────────────────────────────────────── */
body.btf-svh-page .svh-myths { display: flex; flex-direction: column; }
body.btf-svh-page .svh-myth { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.6rem; padding: 1.3rem 0; border-bottom: 1px solid var( --hair ); }
body.btf-svh-page .svh-myth:last-child { border-bottom: none; }
body.btf-svh-page .svh-myth-claim { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
body.btf-svh-page .svh-myth-n { font-family: var( --serif ); font-size: 2.3rem; line-height: .85; color: var( --gold ); }
body.btf-svh-page .btf-svh-section .wrap .svh-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-svh-page .btf-svh-section .wrap .svh-myth-real p { margin: 0; font-size: .95rem; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	body.btf-svh-page .svh-examples, body.btf-svh-page .svh-rules { grid-template-columns: 1fr; }
	body.btf-svh-page .svh-myth { grid-template-columns: 1fr; gap: .7rem; }
	body.btf-svh-page .svh-bar { width: 35%; }
}