/* ── The Basic Strategy Chart — scoped page styles ───────────────────────
   /blackjack/strategy/basic-strategy-chart/, scoped under body.btf-bsc-page.

   Same conventions as blackjack-basic-strategy-page.css: section rhythm and
   eyebrow spacing from rules-page.css, hero chrome shared, and the type
   discipline — serif for headings and display figures, Outfit for body and
   component text, mono for eyebrows, micro-labels and the grid letters.

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

body.btf-bsc-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; --act-sur: #5A5A5A;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
body.btf-bsc-page .btf-bsc-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
body.btf-bsc-page .btf-bsc-hero-cta button.btn-ghost { font: inherit; font-size: .88rem; font-weight: 700; line-height: normal; cursor: pointer; }
body.btf-bsc-page .btf-bsc-hero-cta button.btn-ghost:hover { color: var( --cream ); border-color: rgba( 244, 239, 230, .4 ); }
body.btf-bsc-page .btf-bsc-hero-viz { display: flex; flex-direction: column; gap: .8rem; }
body.btf-bsc-page .btf-bsc-hero-viz-title { font-family: var( --mono ); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var( --gold-soft ); }
body.btf-bsc-page .bsc-sample { 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-bsc-page .bsc-sample-axis { display: block; font-family: var( --mono ); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 244, 239, 230, .55 ); margin-bottom: .45rem; }
body.btf-bsc-page .bsc-sample-grid { display: grid; grid-template-columns: 5.2rem repeat( 3, 1fr ); gap: .3rem; align-items: center; }
body.btf-bsc-page .bsc-sample-grid > span { font-family: var( --mono ); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba( 244, 239, 230, .75 ); }
body.btf-bsc-page .bsc-sample-grid > span.bsc-sample-row { 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 ); }
body.btf-bsc-page .bsc-sample-grid > span.bsc-sample-col { text-align: center; }
body.btf-bsc-page .bsc-sample-grid > span.bsc-sample-cell { display: block; text-align: center; font-family: var( --mono ); font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: #fff; padding: .42rem .2rem; border-radius: 4px; opacity: .55; }
body.btf-bsc-page .bsc-sample-cell.is-this { opacity: 1; box-shadow: 0 0 0 2px #C9A24A; }
body.btf-bsc-page .bsc-sample-read { margin: .9rem 0 0; font-family: var( --sans ); font-size: .9rem; line-height: 1.5; color: rgba( 244, 239, 230, .9 ); }
body.btf-bsc-page .bsc-sample-read b { color: #fff; }
body.btf-bsc-page .bsc-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba( 244, 239, 230, .14 ); }
body.btf-bsc-page .bsc-legend span { font-family: var( --mono ); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: rgba( 244, 239, 230, .7 ); }
body.btf-bsc-page .bsc-legend i { display: inline-block; min-width: 1.5rem; text-align: center; font-family: var( --mono ); font-style: normal; font-size: .62rem; font-weight: 700; color: #fff; padding: .16rem .3rem; border-radius: 3px; margin-right: .35rem; }

/* action colours, shared by the sample, the grids and the moves */
body.btf-bsc-page .c-hit, body.btf-bsc-page .a-hit { background: var( --act-hit ); }
body.btf-bsc-page .c-stand, body.btf-bsc-page .a-stand { background: var( --act-stand ); }
body.btf-bsc-page .c-double, body.btf-bsc-page .a-double { background: var( --act-double ); }
body.btf-bsc-page .c-split, body.btf-bsc-page .a-split { background: var( --act-split ); }
body.btf-bsc-page .c-surrender, body.btf-bsc-page .a-surrender { background: var( --act-sur ); }
/* on the felt the stand colour is the felt colour, so the hero sample and its legend lift it to the lighter felt the basic-strategy hero uses */
body.btf-bsc-page .bsc-sample .c-stand, body.btf-bsc-page .bsc-legend .c-stand { background: #3A7057; }

/* ── section rhythm — same numbers as rules-page.css ────────────────────── */
body.btf-bsc-page .btf-bsc-section { padding: 4rem 0 3rem; scroll-margin-top: 80px; }
body.btf-bsc-page #chart { padding-top: 2.6rem; }   /* the answer section starts sooner */
@media ( max-width: 800px ) { body.btf-bsc-page .btf-bsc-section { padding: 3rem 0 2rem; } }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) { background: var( --cream-2 ); }
body.btf-bsc-page .btf-bsc-section > .wrap > .btf-th-eyebrow,
body.btf-bsc-page .wrap > .btf-th-eyebrow { margin-bottom: .9rem; }
body.btf-bsc-page .btf-bsc-section h2.btf-th-display { margin: 0 0 .55em; font-size: clamp( 1.7rem, 3.4vw, 2.4rem ); }
body.btf-bsc-page .btf-bsc-section h3.btf-th-display { margin: 2.4rem 0 .6em; font-size: clamp( 1.2rem, 1.9vw, 1.5rem ); }
body.btf-bsc-page .btf-bsc-section .btf-th-lede { margin: 0 0 2rem; color: var( --ink-2 ); }
body.btf-bsc-page .btf-bsc-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-bsc-page .btf-bsc-section .wrap p:last-child { margin-bottom: 0; }
body.btf-bsc-page .btf-bsc-section .wrap p b { color: var( --th-ink ); }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-note { font-size: .88rem; line-height: 1.65; color: var( --muted ); margin-top: 1.6rem; }
body.btf-bsc-page .btf-bsc-section .wrap p a { color: var( --forest ); font-weight: 600; }
body.btf-bsc-page .bsc-label { display: block; font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); margin-bottom: .5rem; }

/* ── the chart ──────────────────────────────────────────────────────────── */
/* The rules panel is a <details>: open with its summary hidden on desktop, a
   closed one-line bar on phones so the first cell is a short scroll away.
   The script sets open/closed by viewport; without it, it stays open. */
body.btf-bsc-page .bsc-controls-details { margin: 0 0 .9rem; }
body.btf-bsc-page .bsc-controls-summary { display: none; list-style: none; cursor: pointer; align-items: center; gap: .6rem; padding: .75rem 1rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bsc-page .bsc-controls-summary::-webkit-details-marker { display: none; }
body.btf-bsc-page .bsc-summary-label { font-family: var( --mono ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --muted ); }
body.btf-bsc-page .bsc-summary-text { flex: 1 1 auto; min-width: 0; font-family: var( --sans ); font-size: .86rem; line-height: 1.4; color: var( --th-ink ); }
body.btf-bsc-page .bsc-summary-cta { font-family: var( --mono ); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var( --forest ); white-space: nowrap; }
body.btf-bsc-page .bsc-summary-cta::after { content: ' \25BE'; }
body.btf-bsc-page .bsc-controls-details[open] .bsc-summary-cta::after { content: ' \25B4'; }
body.btf-bsc-page .bsc-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1.2rem; padding: 1rem 1.2rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bsc-page .bsc-controls.is-std .bsc-check, body.btf-bsc-page .bsc-controls.is-std [data-bsc-standard] { display: none; }
body.btf-bsc-page .bsc-controls > .bsc-btn { margin-left: auto; align-self: flex-end; margin-bottom: .1rem; }
body.btf-bsc-page .bsc-chart-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem; }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-controls { background: var( --cream ); }
body.btf-bsc-page .bsc-control { display: flex; flex-direction: column; gap: .3rem; }
body.btf-bsc-page .bsc-control > span { font-family: var( --mono ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --muted ); }
body.btf-bsc-page .bsc-control { flex: 1 1 7.8rem; max-width: 14rem; }
body.btf-bsc-page .bsc-control select { font: inherit; font-family: var( --sans ); font-size: .92rem; padding: .45rem .6rem; border: 1px solid var( --hair ); border-radius: 8px; background: #fff; color: var( --th-ink ); width: 100%; min-width: 0; }
body.btf-bsc-page .bsc-check { display: flex; align-items: center; gap: .45rem; padding-bottom: .45rem; font-family: var( --sans ); font-size: .9rem; color: var( --ink-2 ); cursor: pointer; }
body.btf-bsc-page .bsc-check.is-off { opacity: .5; cursor: default; }
body.btf-bsc-page .bsc-check input { width: 1.05rem; height: 1.05rem; accent-color: var( --forest ); }
body.btf-bsc-page .bsc-btn { display: inline-flex; align-items: center; font-family: var( --mono ); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var( --forest ); padding: .5rem .8rem; border: 1px solid var( --forest ); border-radius: 6px; background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
body.btf-bsc-page .bsc-btn:hover { background: var( --forest ); color: var( --cream ); }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-rules-line { font-size: .9rem; color: var( --muted ); margin: 0; flex: 1 1 auto; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-axis { font-family: var( --mono ); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); margin: 0 0 .9rem; }

body.btf-bsc-page .bsc-grids { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: 'hard soft' 'hard pair'; gap: 1.4rem 2rem; align-items: start; scroll-margin-top: 80px; }
body.btf-bsc-page .bsc-grid { min-width: 0; }   /* else the table's min-width grows the grid item past its column */
body.btf-bsc-page .bsc-grid-hard { grid-area: hard; } body.btf-bsc-page .bsc-grid-soft { grid-area: soft; } body.btf-bsc-page .bsc-grid-pair { grid-area: pair; }
body.btf-bsc-page .bsc-grid-title { font-family: var( --serif ); font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; color: var( --th-ink ); margin: 0 0 .5rem; }
body.btf-bsc-page .bsc-scroll { overflow-x: auto; }
body.btf-bsc-page .bsc-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; min-width: 21rem; margin: 0; }
body.btf-bsc-page .bsc-table th:first-child { width: 4.6rem; }
body.btf-bsc-page .bsc-table th { font-family: var( --mono ); font-size: .72rem; font-weight: 600; color: var( --ink-2 ); padding: .35rem .2rem; text-transform: none; letter-spacing: 0; border: none; background: transparent; }
body.btf-bsc-page .bsc-table thead th { background: var( --cream-2 ); border-radius: 4px; text-align: center; }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-table thead th { background: var( --cream ); }
body.btf-bsc-page .bsc-table thead th:first-child { text-align: left; padding-left: .5rem; }
body.btf-bsc-page .bsc-table tbody th { text-align: left; padding-left: .5rem; white-space: nowrap; }
body.btf-bsc-page .bsc-table td { text-align: center; padding: .4rem .15rem; border-radius: 4px; font-family: var( --mono ); font-size: .8rem; cursor: default; font-weight: 700; color: #fff; border: none; transition: box-shadow .12s, opacity .12s; }
body.btf-bsc-page .bsc-table td.is-changed { box-shadow: inset 0 0 0 2px var( --cream ), inset 0 0 0 3px rgba( 28, 24, 20, .35 ); }
body.btf-bsc-page .bsc-table td.is-lit { box-shadow: 0 0 0 2px var( --th-ink ); position: relative; z-index: 1; }
body.btf-bsc-page .bsc-table td.is-here { box-shadow: 0 0 0 2px var( --gold ); position: relative; z-index: 1; }
body.btf-bsc-page .bsc-table th.is-here { background: var( --th-ink ); color: var( --cream ); border-radius: 4px; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-cell-say { font-size: .9rem; color: var( --th-ink ); margin: .7rem 0 0; min-height: 1.6em; }
body.btf-bsc-page .bsc-table tbody:has( td.is-lit ) td:not( .is-lit ) { opacity: .28; }
body.btf-bsc-page .bsc-grids:has( td.is-lit ) tbody:not( :has( td.is-lit ) ) td { opacity: .28; }
/* base.css zebra-stripes .prose table rows; keep the felt off these grids */
body.btf-bsc-page .bsc-grids .bsc-table tbody tr:nth-child( n ), body.btf-bsc-page .bsc-grids .bsc-table tbody tr:nth-child( n ) th { background: transparent; }
body.btf-bsc-page .bsc-grids .table-scroll-wrap { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; overflow: visible; }
body.btf-bsc-page .bsc-key { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0 0 .4rem; font-family: var( --mono ); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var( --muted ); }
body.btf-bsc-page .bsc-key i { display: inline-block; min-width: 1.6rem; text-align: center; font-style: normal; font-weight: 700; color: #fff; padding: .12rem .25rem; border-radius: 3px; margin-right: .35rem; }
body.btf-bsc-page .bsc-key small { font-size: inherit; text-transform: none; letter-spacing: 0; }
body.btf-bsc-page .bsc-key i.k-note { background: var( --cream ); box-shadow: inset 0 0 0 1px rgba( 28, 24, 20, .35 ); color: var( --th-ink ); }
body.btf-bsc-page .bsc-key .k-changed { display: none; }
body.btf-bsc-page .bsc-key.has-changes .k-changed { display: inline; }
body.btf-bsc-page .bsc-print-title { display: none; }

/* ── how to read the chart (under the grids) ────────────────────────────── */
body.btf-bsc-page .btf-bsc-section h3.bsc-read-title { margin: 2.2rem 0 .8em; }
body.btf-bsc-page .bsc-read { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat( 3, 1fr ); gap: .8rem; }
body.btf-bsc-page .bsc-read li { padding: .95rem 1.1rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); font-family: var( --sans ); font-size: .92rem; line-height: 1.55; color: var( --ink-2 ); }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-read li { background: var( --cream ); }
body.btf-bsc-page .bsc-read li b { display: block; color: var( --th-ink ); margin-bottom: .25rem; }
body.btf-bsc-page .bsc-read .bsc-act { vertical-align: middle; margin: 0 .1rem; }
body.btf-bsc-page .bsc-read-cells { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; font-family: var( --sans ); font-size: .9rem; color: var( --ink-2 ); }
body.btf-bsc-page .bsc-read-cells span { display: inline-flex; align-items: center; gap: .45rem; }
body.btf-bsc-page .bsc-read-cells span b { color: var( --th-ink ); font-weight: 600; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-read-note { margin-top: .9rem; }
body.btf-bsc-page .bsc-act { display: inline-block; font-family: var( --mono ); font-size: .64rem; font-weight: 700; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .18rem .45rem; border-radius: 4px; }
body.btf-bsc-page .bsc-save { display: grid; grid-template-columns: minmax( 0, 22rem ) 1fr; gap: 1.4rem; align-items: center; margin-top: 2rem; padding: 1.2rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-save { background: var( --cream ); }
body.btf-bsc-page .bsc-save-figure { margin: 0; }
body.btf-bsc-page .bsc-save-figure a { display: block; }
body.btf-bsc-page .bsc-save-img { display: block; width: 100%; height: auto; border: 1px solid var( --hair ); border-radius: 6px; background: #fff; }
body.btf-bsc-page .bsc-save-figure figcaption { font-family: var( --mono ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --muted ); margin-top: .5rem; }
body.btf-bsc-page .bsc-save-body b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; color: var( --th-ink ); margin-bottom: .35rem; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-save-body p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.55; }
body.btf-bsc-page .bsc-save-btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── the chart in lines ─────────────────────────────────────────────────── */
body.btf-bsc-page .bsc-line-groups { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.2rem; align-items: start; }
body.btf-bsc-page .bsc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
body.btf-bsc-page .bsc-line { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; padding: .8rem .95rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius ); cursor: pointer; transition: border-color .12s, background .12s; }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-line { background: var( --cream ); }
body.btf-bsc-page .bsc-line:hover, body.btf-bsc-page .bsc-line:focus-visible { border-color: var( --forest ); outline: none; }
body.btf-bsc-page .bsc-line.is-active { border-color: var( --forest ); box-shadow: inset 0 0 0 1px var( --forest ); }
body.btf-bsc-page .bsc-line-n { font-family: var( --mono ); font-size: .74rem; font-weight: 600; color: var( --gold ); padding-top: .12rem; }
body.btf-bsc-page .bsc-line-text { display: block; font-family: var( --sans ); font-size: .93rem; line-height: 1.5; color: var( --th-ink ); }
body.btf-bsc-page .bsc-line-status { display: block; margin-top: .3rem; font-family: var( --mono ); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var( --muted ); }
body.btf-bsc-page .bsc-line-status.is-off { color: var( --red ); text-transform: none; letter-spacing: 0; font-family: var( --sans ); font-size: .8rem; }

/* ── what the rules move ────────────────────────────────────────────────── */
body.btf-bsc-page .bsc-moves { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 1rem; }
body.btf-bsc-page .bsc-move { padding: 1.2rem 1.3rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); }
body.btf-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-move { background: var( --cream ); }
body.btf-bsc-page .bsc-move-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
body.btf-bsc-page .bsc-move-head h3 { font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var( --th-ink ); margin: 0; }
body.btf-bsc-page .bsc-move-count { font-family: var( --mono ); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); white-space: nowrap; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-move-why { margin: .35rem 0 .8rem; font-size: .88rem; line-height: 1.55; color: var( --muted ); }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-move-note { margin: 0; font-size: .9rem; }
body.btf-bsc-page .bsc-move-list { list-style: none; margin: 0; padding: 0; }
body.btf-bsc-page .bsc-move-list li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .5rem 0; border-top: 1px solid var( --hair ); font-family: var( --sans ); font-size: .9rem; }
body.btf-bsc-page .bsc-move-list li b { color: var( --th-ink ); font-weight: 600; }
body.btf-bsc-page .bsc-move-arrow { font-family: var( --mono ); font-size: .74rem; color: var( --muted ); white-space: nowrap; }
body.btf-bsc-page .bsc-move-gap { font-family: var( --mono ); font-size: .74rem; color: var( --muted ); white-space: nowrap; }

/* ── using it ───────────────────────────────────────────────────────────── */
body.btf-bsc-page .bsc-uses { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1rem; margin-top: 2rem; }
body.btf-bsc-page .bsc-use { 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-bsc-page .btf-bsc-section:nth-of-type( even ) .bsc-use { background: var( --cream ); }
body.btf-bsc-page .bsc-use b { display: block; font-family: var( --sans ); font-weight: 700; font-size: 1.02rem; color: var( --th-ink ); margin-bottom: .4rem; }
body.btf-bsc-page .btf-bsc-section .wrap .bsc-use p { margin: 0; font-size: .92rem; line-height: 1.55; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 960px ) {
	body.btf-bsc-page .bsc-grids { grid-template-columns: 1fr; grid-template-areas: 'hard' 'soft' 'pair'; }
	body.btf-bsc-page .bsc-line-groups, body.btf-bsc-page .bsc-moves { grid-template-columns: 1fr; }
}
@media ( pointer: coarse ) {
	body.btf-bsc-page .bsc-control select { font-size: 16px; height: 44px; }
	body.btf-bsc-page .bsc-btn, body.btf-bsc-page .bsc-check, body.btf-bsc-page .bsc-controls-summary { min-height: 44px; }
	body.btf-bsc-page .bsc-check { align-items: center; }
}
@media ( max-width: 860px ) {
	body.btf-bsc-page .btf-bsc-hero-viz { display: none; }
	body.btf-bsc-page .bsc-uses, body.btf-bsc-page .bsc-read, body.btf-bsc-page .bsc-save { grid-template-columns: 1fr; }
	body.btf-bsc-page .bsc-save { gap: 1rem; }
	body.btf-bsc-page .bsc-controls-summary { display: flex; }
	body.btf-bsc-page .bsc-controls { margin-top: .5rem; }
	body.btf-bsc-page .bsc-controls > .bsc-btn { margin-left: 0; width: 100%; justify-content: center; }
	body.btf-bsc-page .bsc-chart-bar .bsc-rules-line { display: none; }
	body.btf-bsc-page .bsc-chart-bar { justify-content: flex-start; }
	body.btf-bsc-page .bsc-read-cells { flex-direction: column; gap: .5rem; }
	body.btf-bsc-page .bsc-move-list li { grid-template-columns: 1fr auto; gap: .15rem .8rem; }
	body.btf-bsc-page .bsc-move-list li .bsc-move-arrow { grid-column: 1 / -1; }
}

/* ── print: the three grids and nothing else ────────────────────────────── */
@media print {
	body.btf-bsc-page .site-header, body.btf-bsc-page .site-footer, body.btf-bsc-page .btf-th-progress, body.btf-bsc-page .hero,
	body.btf-bsc-page .author-bar, body.btf-bsc-page .changelog-drawer, body.btf-bsc-page #changelog-drawer,
	body.btf-bsc-page .btf-bsc-section:not( #chart ), body.btf-bsc-page .btf-th-summary, body.btf-bsc-page #chart .btf-th-eyebrow,
	body.btf-bsc-page #chart h2, body.btf-bsc-page .bsc-controls-details, body.btf-bsc-page .bsc-chart-bar, body.btf-bsc-page .bsc-axis,
	body.btf-bsc-page .bsc-cell-say, body.btf-bsc-page .bsc-read-cells, body.btf-bsc-page .bsc-read-note, body.btf-bsc-page .bsc-save,
	body.btf-bsc-page #chart .bsc-note, body.btf-bsc-page .btf-th-toc, body.btf-bsc-page .btf-th-sidebar { display: none !important; }
	body.btf-bsc-page .btf-bsc-section h3.bsc-read-title { font-size: 11pt; margin: .8rem 0 .3rem; color: #000; }
	body.btf-bsc-page .bsc-read { grid-template-columns: repeat( 3, 1fr ); gap: .4rem; }
	body.btf-bsc-page .bsc-read li { font-size: 8pt; padding: .4rem .6rem; background: #fff; color: #000; }
	body.btf-bsc-page .bsc-table th.is-here, body.btf-bsc-page .bsc-table td.is-here { background: transparent; color: inherit; box-shadow: none !important; }
	body.btf-bsc-page, body.btf-bsc-page .btf-bsc-section { background: #fff !important; padding: 0 !important; }
	body.btf-bsc-page .bsc-print-title { display: block; font-family: var( --serif ); font-size: 14pt; margin: 0 0 .6rem; color: #000; }
	body.btf-bsc-page .bsc-grids { grid-template-columns: 1fr 1fr; grid-template-areas: 'hard soft' 'hard pair'; gap: .8rem 1.2rem; }
	body.btf-bsc-page .bsc-scroll { overflow: visible; }
	body.btf-bsc-page .bsc-table { min-width: 0; }
	body.btf-bsc-page .bsc-table td, body.btf-bsc-page .bsc-key i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body.btf-bsc-page .bsc-table td { font-size: 8pt; padding: .2rem .1rem; }
	body.btf-bsc-page .bsc-table th { font-size: 7.5pt; color: #000; }
	body.btf-bsc-page .bsc-grid { break-inside: avoid; }
	body.btf-bsc-page .bsc-table td { opacity: 1 !important; transition: none !important; }
	body.btf-bsc-page .bsc-table td.is-lit { box-shadow: none !important; }
}