/* The quiz page's app shell (page-blackjack-basic-strategy-quiz.php): one
   compact page header band above the tool (the H1, the one-line intro,
   the E-E-A-T byline), then the tool filling the first screen under the
   site header. The page's words sit below, in the article shell, starting
   at the first H2.

   No layout shift: the mount reserves the tool's height before the bundle
   runs, and the bundle sizes its screens to the same height through
   --bjt-min-height. Phones: the tool is the whole screen, because a run
   scrolls the site header and the band away and the tool then fills it.
   Desktop: the tool is the screen less the header and the band, so the
   whole app sits in the first screen and stays there. The chrome heights
   below are measured on the live header and the staged band (a laptop at
   1366x768 keeps the hook and Start in view); a few px either way only
   scrolls. */

.qapp {
  --qapp-header: 66px;   /* the site header above the shell */
  --qapp-head: 0px;      /* the page header band (phones: it scrolls away) */
  --qapp-chrome: 0px;
  display: flex;
  flex-direction: column;
  background: #0f1a0d;
  color: #fff;
}

/* ── the page header band ── */
.qapp-head {
  padding: 14px var(--bji-gutter) 12px;
  background: #0f1a0d;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.qapp-head h1 {
  margin: 0;
  font-size: 1.35rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.2px;
  color: #fff;
}
/* the intro and the byline share a row where there is room, and stack on a phone */
.qapp-head-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 20px;
  margin-top: 6px;
}
.qapp-intro {
  margin: 0;
  font-size: var(--bji-text-sm); line-height: 1.45;
  color: #d3dcd6;   /* 12:1 on the band */
}
/* the theme's byline (markup from inc/eeat.php, base styles from article.css
   for the navy hero) on this band: compact, and every word AA on the dark
   green (the muted text 10:1, the links and the date white) */
.qapp-head .av2-byline { margin: 0; gap: 4px 14px; font-size: var(--bji-text-xs); color: #b9c6bf; }
.qapp-head .av2-byline .who { gap: 6px; }
.qapp-head .av2-byline img { width: 24px; height: 24px; border-color: rgb(255 255 255 / 0.35); }
.qapp-head .av2-byline a { color: #fff; border-bottom-color: rgb(255 255 255 / 0.45); }
.qapp-head .av2-byline a:hover { border-bottom-color: #fff; }
.qapp-head .av2-byline .date time { color: #fff; }

/* ── the tool ── */
.qapp-tool { flex: 1 1 auto; }
/* the mount reserves the screen; the bundle's screens fill the same box */
.qapp-tool #blackjack-trainer {
  --bjt-min-height: calc(100svh - var(--qapp-chrome));
  min-height: calc(100svh - var(--qapp-chrome));
}
.qapp-tool #blackjack-trainer > div[style] { min-height: calc(100svh - var(--qapp-chrome)) !important; }

/* ── the page's words, below the tool ── */
/* The hands players miss most, as cards (captain, 2026-10-14, round 11):
   server-rendered text and CSS, the quiz's own suit art as SVG symbols,
   nothing drawn as an image. Each card: the player's two cards and the
   dealer's upcard (the result screen's thumbnail style: a corner index
   and one suit), the hand's name, the right play as a chip in the
   trainer's button colour, the usual miss as a muted crossed chip with
   its share, the miss rate as a bar with its figure, the cost as a badge,
   the reason. Three to a row on a desktop window in the theme's breakout
   band, two on a tablet, one on a phone. Every chip and bar carries its
   words; the colour is on top. */
.bjt-missed {
  list-style: none; margin: var(--bji-space-4) 0 var(--bji-space-5); padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bji-space-4);
}
.bjt-missed-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--bji-space-4);
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg); box-shadow: var(--bji-shadow-sm);
}
.bjt-missed-hand { display: flex; align-items: center; gap: 5px; }
.bjt-missed-vs {
  margin: 0 7px; font-size: var(--bji-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bji-text-muted);
}
/* the playing card: the quiz's thumbnail (Card.module.css .thumb), in CSS */
.bjt-pc {
  --pc: 46px;
  position: relative; display: inline-block; flex: 0 0 auto;
  width: var(--pc); height: calc(var(--pc) * 1.385);
  border-radius: 4px; background: #f2f2f2; box-shadow: -1px 1px 2px rgb(0 0 0 / 0.3);
  color: #4d4d4d; font-family: Inter, system-ui, -apple-system, sans-serif; line-height: 1;
}
.bjt-pc--red { color: #943434; }
.bjt-pc-ix { position: absolute; top: calc(var(--pc) * 0.08); left: calc(var(--pc) * 0.08); display: flex; align-items: center; gap: 1px; }
.bjt-pc-ix b { font-size: calc(var(--pc) * 0.42); font-weight: 700; }
.bjt-pc-ix svg { width: calc(var(--pc) * 0.23); height: calc(var(--pc) * 0.23); }
.bjt-pc-s { position: absolute; right: calc(var(--pc) * 0.115); bottom: calc(var(--pc) * 0.115); width: calc(var(--pc) * 0.46); height: calc(var(--pc) * 0.46); }
.bjt-pc svg { display: block; fill: currentColor; }
.bjt-missed-title { margin: 2px 0 0; font-size: var(--bji-text-lg); font-weight: var(--bji-weight-bold); line-height: 1.25; color: var(--bji-navy-900); }
.bjt-prose .bjt-missed-title { margin: 2px 0 0; }
/* the plays: the right one in the trainer's button colour, the usual miss
   muted and crossed; each chip says what it is */
.bjt-missed-plays { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bjt-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: var(--bji-text-xs); font-weight: 700; letter-spacing: .02em; color: #fff;
}
.bjt-chip-k { font-weight: 500; opacity: 0.88; }
.bjt-chip--hit { background: #1f7a44; }
.bjt-chip--stand { background: #a12836; }
.bjt-chip--double { background: #d3a832; color: #1d1606; }
.bjt-chip--double .bjt-chip-k { opacity: 0.8; }
.bjt-chip--split { background: #2d5a94; }
.bjt-chip--wrong { background: var(--bji-gray-050); color: var(--bji-text-muted); border: 1px solid var(--bji-border); }
.bjt-chip--wrong s { text-decoration: line-through; text-decoration-thickness: 2px; }
/* the miss rate: the figure, then a bar as long as it */
.bjt-missed-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  margin: 0; font-size: var(--bji-text-xs); font-weight: 700; color: var(--bji-navy-900);
  font-variant-numeric: tabular-nums;
}
.bjt-missed-bar-track { display: block; height: 8px; border-radius: 999px; background: var(--bji-gray-100, #e6e9ef); overflow: hidden; }
.bjt-missed-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bji-navy-800), var(--bji-navy-900)); }
.bjt-missed-cost { margin: 0; }
.bjt-badge {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: var(--bji-text-xs); font-weight: 700; color: #6b4e08; background: #fff3cf; border: 1px solid #efd58a;
}
.bjt-missed-why { margin: 0; font-size: var(--bji-text-sm); line-height: 1.5; color: var(--bji-text-muted); }
.bjt-prose .bjt-missed-plays, .bjt-prose .bjt-missed-bar, .bjt-prose .bjt-missed-cost, .bjt-prose .bjt-missed-why { margin: 0; }
@media (min-width: 640px) {
  .bjt-missed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the one footnote with the exact sources and periods, at the end of the
   article: the body copy carries one trust number and no sample dates */
.qapp-article .bjt-sources {
  margin: var(--bji-space-6) 0 0;
  padding-top: var(--bji-space-3);
  border-top: 1px solid var(--bji-border);
  font-size: var(--bji-text-xs); line-height: 1.5;
  color: var(--bji-text-muted);
}
@media (min-width: 1024px) {
  .bjt-missed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .qapp {
    --qapp-header: 76px;
    --qapp-head: 96px;
    --qapp-chrome: calc(var(--qapp-header) + var(--qapp-head));
  }
  .qapp-head {
    padding-top: 18px; padding-bottom: 14px;
    padding-left: max(var(--bji-gutter), calc((100% - 1088px) / 2));
    padding-right: max(var(--bji-gutter), calc((100% - 1088px) / 2));
  }
  .qapp-head h1 { font-size: 1.6rem; }
  .qapp-head-row { margin-top: 8px; }
  .qapp-intro { font-size: var(--bji-text-base); }
}