/* Blackjack trainer (/blackjack-trainer). Everything is scoped under .bjt so
   nothing here leaks into the rest of the site, and site.css's bare `button`
   and `section` rules are undone where the trainer needs its own.
   Layout: the table and its grading sit in the main column; the chart,
   cash-out and signup ride in a side rail that drops below on a phone. */
.bjt{
  --on-miss:#FFFFFF; --on-ok:#FFFFFF;
  --felt:#1F5B45; --felt-ink:#F2F6F3; --felt-line:#3C7A62; --chip:#F2F6F3; --chip-ink:#16181C;
  --hit:#F6E3E7; --stand:#E4EFE9; --dbl:#F4ECCD; --split:#E3E8F4; --sur:#E9E2F1;
  margin-top:22px; font-size:16px; line-height:1.5;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bjt{
  --on-miss:#1A0508; --on-ok:#04140C;
  --felt:#16402F; --felt-ink:#E8EFEA; --felt-line:#2C6650;
  --hit:#4A2630; --stand:#1F3D30; --dbl:#453A14; --split:#252E48; --sur:#3A2D4A } }
:root[data-theme="dark"] .bjt{
  --on-miss:#1A0508; --on-ok:#04140C;
  --felt:#16402F; --felt-ink:#E8EFEA; --felt-line:#2C6650;
  --hit:#4A2630; --stand:#1F3D30; --dbl:#453A14; --split:#252E48; --sur:#3A2D4A }

.bjt [hidden]{display:none !important}
.bjt button{font-family:var(--sans); text-transform:none; letter-spacing:0}
.bjt button:hover{opacity:1}
.bjt-cols{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start}
.bjt-main,.bjt-rail{display:flex; flex-direction:column; gap:18px; min-width:0}
@media (max-width:900px){ .bjt-cols{grid-template-columns:minmax(0,1fr)} }
.bjt .label{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.bjt .panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px}
.bjt .panel p{margin:0}
.bjt .small{font-size:13px; color:var(--ink-3); margin:0}
.bjt .small b{color:var(--ink-2)}

/* ── the table ────────────────────────────────────── */
.bjt .felt{background:var(--felt); color:var(--felt-ink); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:14px; outline:4px solid transparent; outline-offset:2px}
.bjt .felt.err{outline-color:var(--miss); animation:bjt-shake .38s}
.bjt .felt.right{outline-color:var(--ok)}
@keyframes bjt-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.bjt .topbar{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:space-between; font-family:var(--mono); font-size:13px}
.bjt .topbar b{font-weight:700}
.bjt .hand{display:flex; flex-direction:column; gap:6px; border-radius:8px; padding:6px; margin:-6px}
.bjt .hand.active{background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px var(--felt-line)}
.bjt .hand .whose{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.85}
.bjt .hands{display:flex; flex-direction:column; gap:12px}
.bjt .cards{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:92px}
.bjt .card{position:relative; flex:none; width:64px; height:92px; border-radius:7px; background:#FBFBF8; color:#16181C; border:1px solid #C9CCC6; box-shadow:0 1px 2px rgba(0,0,0,.25); font-family:Georgia,"Times New Roman",serif; font-weight:700; line-height:1; animation:bjt-deal .16s ease-out}
.bjt .card.red{color:#B3263F}
.bjt .card i{font-style:normal}
/* corner index: rank over suit, repeated upside down in the opposite corner */
.bjt .card .ix{position:absolute; top:4px; left:3px; width:13px; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:13px; letter-spacing:-.06em}
.bjt .card .ix i{font-size:11px}
.bjt .card .ix.flip{top:auto; left:auto; bottom:4px; right:3px; transform:rotate(180deg)}
/* pips sit where they do on a printed card (positions set inline) */
.bjt .card .pips{position:absolute; inset:9px 15px}
.bjt .card .pips b{position:absolute; font-size:14px; font-weight:400; transform:translate(-50%,-50%)}
.bjt .card .pips b.flip{transform:translate(-50%,-50%) rotate(180deg)}
.bjt .card .pips.ace b{font-size:34px}
/* jack, queen, king: a framed court card */
.bjt .card .court{position:absolute; inset:9px 15px; border:1px solid currentColor; border-radius:3px; background:rgba(22,24,28,.05); display:flex; align-items:center; justify-content:center}
.bjt .card.red .court{background:rgba(179,38,63,.07)}
.bjt .card .court b{font-size:30px}
.bjt .card .court i{position:absolute; top:3px; left:3px; font-size:11px}
.bjt .card .court i.flip{top:auto; left:auto; bottom:3px; right:3px; transform:rotate(180deg)}
.bjt .card.down{background:repeating-linear-gradient(45deg,#2C6650,#2C6650 5px,#245642 5px,#245642 10px); border-color:#3C7A62}
.bjt .card.side{transform:rotate(90deg); margin:0 14px}
@keyframes bjt-deal{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.bjt .card.side{animation:none}
.bjt .pill{font-family:var(--mono); font-size:13.5px; border:1px solid var(--felt-line); border-radius:999px; padding:3px 10px; white-space:nowrap}
.bjt .pill.win{background:var(--chip); color:var(--chip-ink); border-color:var(--chip); font-weight:700}
.bjt .pill.loss{opacity:.8}
.bjt .outcome{font-family:var(--mono); font-size:15px; font-weight:700; min-height:22px}

.bjt .acts{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px}
.bjt .acts button{font-weight:600; font-size:15px; padding:13px 6px; border-radius:8px; border:2px solid transparent; background:var(--chip); color:var(--chip-ink); cursor:pointer}
.bjt .acts button:hover{filter:brightness(.94)}
.bjt .acts button:focus-visible,.bjt .segs button:focus-visible,.bjt .peek:focus-visible,.bjt .btn:focus-visible{outline:3px solid var(--pred); outline-offset:2px}
.bjt .acts button[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.bjt .acts button.wrong{background:var(--miss); color:var(--on-miss); border-color:var(--miss); opacity:1}
.bjt .acts button.best{background:var(--ok); color:var(--on-ok); border-color:var(--chip); opacity:1}
.bjt .acts button kbd{font:400 11px var(--mono); opacity:.55; margin-left:5px}
@media (hover:none){ .bjt .acts button kbd{display:none} }
.bjt .acts.one{grid-template-columns:minmax(0,1fr)}
/* hand over: the Deal button leads, and the graded plays shrink to a record of what happened */
.bjt #bj-next{order:1}
.bjt #bj-acts.over{order:2; pointer-events:none; gap:6px}
.bjt #bj-acts.over button{padding:6px 4px; font-size:13px}
.bjt #bj-acts.over button:not(.wrong):not(.best){display:none}
.bjt .rules{order:3}
.bjt #bj-deal{font-size:17px; padding:15px 6px}
.bjt .prompt{font-weight:600; font-size:15px}

.bjt .rules{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--felt-line); padding-top:12px}
.bjt .switches{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.bjt .sw{display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap}
.bjt .segs{display:inline-flex; border:1px solid var(--felt-line); border-radius:7px; overflow:hidden}
.bjt .segs button{font-weight:600; font-size:13px; padding:6px 11px; border:0; border-radius:0; background:transparent; color:var(--felt-ink); cursor:pointer}
.bjt .segs button[aria-pressed="true"]{background:var(--chip); color:var(--chip-ink)}
.bjt .segs button[disabled]{cursor:not-allowed; opacity:.55}
.bjt .segs button[aria-pressed="true"][disabled]{opacity:.8}
.bjt .fixed{font-family:var(--mono); font-size:11px; opacity:.78}
.bjt .peekbtn{display:none; font-weight:600; font-size:13px; padding:7px 12px; border-radius:7px; border:1px solid var(--felt-line); background:transparent; color:var(--felt-ink); cursor:pointer}
@media (max-width:900px){ .bjt .peekbtn{display:inline-block} }
.bjt .felt input{font:600 13px var(--sans); width:76px; padding:6px 8px; border-radius:7px; border:1px solid var(--felt-line); background:transparent; color:var(--felt-ink)}

/* panels on the page surface use the same segmented control, in page colours */
.bjt .panel .segs{border-color:var(--line-strong)}
.bjt .panel .segs button{color:var(--ink)}
.bjt .panel .segs button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.bjt .panel input{font:15px var(--sans); padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); min-width:0}
.bjt .btn{font-weight:600; font-size:14px; padding:9px 14px; border-radius:7px; border:1px solid var(--ink); background:var(--ink); color:var(--surface); cursor:pointer}
.bjt .btn.plain{background:none; color:var(--ink)}
.bjt .btnrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bjt .setrow{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:14px}
.bjt .setrow > span:first-child{min-width:74px; color:var(--ink-2)}
.bjt details.panel > summary{cursor:pointer; font-weight:600; font-size:15px; padding:0}
.bjt details.panel > summary::before{margin-right:8px}
.bjt details.panel[open] > summary{margin-bottom:4px}
.bjt .notice{border:1px solid var(--pred); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; background:var(--panel)}

/* ── feedback ─────────────────────────────────────── */
.bjt .fb{border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; background:var(--sunk); border:1px solid var(--line)}
.bjt .fb .verdict{font-family:var(--mono); font-weight:700; font-size:15px}
.bjt .fb p{margin:0; color:var(--ink-2); font-size:14.5px}
.bjt .fb .evs{font-family:var(--mono); font-size:12.5px}
.bjt .fb .meta{display:flex; flex-wrap:wrap; gap:8px}
.bjt .fb .meta:empty{display:none}
.bjt .fb .bjtag{font-family:var(--mono); font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px; border:1px solid currentColor}
.bjt .fb.good{background:var(--panel); border:2px solid var(--ok)}
.bjt .fb.good .verdict{color:var(--ok); font-size:17px}
.bjt .fb.bad{background:var(--miss); border-color:var(--miss); color:var(--on-miss); padding:18px}
.bjt .fb.bad .verdict{font-size:24px; letter-spacing:.02em}
.bjt .fb .play{display:none}
.bjt .fb.bad .play{display:block; font-size:18px; font-weight:700}
.bjt .fb.bad p{color:var(--on-miss)}

/* ── scoreboard ───────────────────────────────────── */
.bjt .tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .bjt .tiles{grid-template-columns:minmax(0,1fr)} }
.bjt .tile{border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0}
.bjt .tile.you{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.bjt .tile .num{font-family:var(--mono); font-size:25px; font-weight:700; font-variant-numeric:tabular-nums}
.bjt .tile small{color:var(--ink-3); font-size:12.5px; line-height:1.35}
.bjt .kv{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
@media (max-width:560px){ .bjt .kv{grid-template-columns:repeat(2,minmax(0,1fr))} }
.bjt .kv div{display:flex; flex-direction:column}
.bjt .kv b{font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums}
.bjt .kv b.drop{color:var(--miss)}
.bjt .kv span{font-size:12.5px; color:var(--ink-3)}
.bjt .row{display:grid; grid-template-columns:92px minmax(0,1fr) 92px; gap:10px; align-items:center; font-size:14px}
.bjt .meter{height:8px; background:var(--sunk); border-radius:999px; overflow:hidden}
.bjt .meter i{display:block; height:100%; background:var(--ok); border-radius:999px}
.bjt .meter i.mid{background:var(--pred)} .bjt .meter i.low{background:var(--miss)}
.bjt .row .p{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.bjt .missed{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14.5px}
.bjt .missed li{display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:6px; margin:0}
.bjt .missed li:last-child{border-bottom:0; padding-bottom:0}
.bjt .missed code{font-family:var(--mono); font-weight:700}
.bjt .missed .d{color:var(--ink-3); text-align:right}

/* ── chart ────────────────────────────────────────── */
.bjt .chartbox{position:relative}
.bjt .scroll{overflow-x:auto}
.bjt table.chart{border-collapse:separate; border-spacing:2px; font-family:var(--mono); font-size:11px; width:100%; min-width:0; font-variant-numeric:tabular-nums; margin:0}
.bjt .chart th{font-weight:600; font-family:var(--mono); font-size:inherit; letter-spacing:0; text-transform:none; vertical-align:middle; color:var(--ink-3); padding:2px 0; text-align:center; background:none; border:0}
.bjt .chart th.g{text-align:left; padding-top:8px; letter-spacing:.06em; text-transform:uppercase; font-size:10px}
.bjt .chart td{vertical-align:middle; text-align:center; padding:4px 0; border-radius:3px; font-weight:700; color:var(--ink); min-width:19px; border:0}
.bjt .chart td.H{background:var(--hit)} .bjt .chart td.S{background:var(--stand)} .bjt .chart td.D{background:var(--dbl)} .bjt .chart td.P{background:var(--split)} .bjt .chart td.R{background:var(--sur)}
.bjt .chart td.now{outline:2px solid var(--ink); outline-offset:0}
.bjt .chart td.rowh{background:none; color:var(--ink-2); text-align:left; font-weight:600; padding-right:4px; white-space:nowrap}
.bjt .blur{filter:blur(7px); transition:filter .15s; user-select:none; -webkit-user-select:none}
.bjt .chartbox.open .blur{filter:none}
.bjt .peek{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; font-weight:600; font-size:14px; color:var(--ink); padding:0; touch-action:none; -webkit-touch-callout:none}
.bjt .peek span{background:var(--panel); border:1px solid var(--line-strong); border-radius:999px; padding:8px 14px; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.bjt .chartbox.open .peek span{opacity:0}
.bjt .legend{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:var(--ink-2)}
.bjt .legend i{display:inline-block; min-width:16px; height:16px; border-radius:3px; vertical-align:-3px; margin-right:4px; padding:0 2px; font:700 10px/16px var(--mono); text-align:center; color:var(--ink); font-style:normal}
.bjt .never{border-left:3px solid var(--miss); padding:2px 0 2px 10px; font-size:14px; color:var(--ink-2)}
.bjt .never b{color:var(--ink)}

/* the chart again, as a sheet over the table on a phone */
.bjt .sheet{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel); border-top:1px solid var(--line-strong); border-radius:14px 14px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.25); padding:12px 14px 18px; max-height:86vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px}
.bjt .sheet .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.bjt .sheet table.chart{font-size:12px}
.bjt .sheet .chart td{padding:5px 0}

/* ── side rail ────────────────────────────────────── */
.bjt .cash .big{font-family:var(--mono); font-weight:700}
.bjt .cash .inputs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.bjt .cash label{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-3)}
.bjt .cmp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; font-size:14px}
.bjt .cmp b{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right}
.bjt .signup{display:flex; gap:8px; flex-wrap:wrap}
.bjt .signup input{flex:1 1 160px}
.bjt .shop{display:flex; flex-direction:column; gap:8px; font-size:14.5px; margin:0; padding:0; list-style:none}
.bjt .shop li{margin:0}
.bjt .shop span{display:block; color:var(--ink-3); font-size:12.5px}

@media (prefers-reduced-motion:reduce){
  .bjt .felt.err,.bjt .card{animation:none}
  .bjt .blur{transition:none}
}

/* the worked chart in the article below the tool */
.bjt-method{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); line-height:1.6}

/* ── welcome / reset pop-up ───────────────────────── */
.bjt .resetbtn{font:600 12px var(--sans); padding:3px 10px; border-radius:999px; border:1px solid var(--felt-line); background:transparent; color:var(--felt-ink); cursor:pointer}
.bjt .resetbtn:hover{background:rgba(255,255,255,.1)}
.bjt .modal{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px}
.bjt .modal .box{background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:14px; padding:22px; width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.bjt .modal .roll{font-size:22px; line-height:1.25}
.bjt .modal .roll b{font-family:var(--mono); font-size:30px; display:block}
.bjt .modal p{margin:0; font-size:14.5px; color:var(--ink-2)}
.bjt .modal .segs{border-color:var(--line-strong)}
.bjt .modal .segs button{color:var(--ink)}
.bjt .modal .segs button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.bjt .btn.go{font-size:17px; padding:13px 22px; flex:1 1 auto}