/* ─── THE QUESTION — folio, stem, figures, printed tables ─── */
/* ══════════════════════════════════════════════════════════════════════
   THE QUESTION SURFACE — .problem-card and everything inside it.
   Additive override layer; every selector scoped under .bs (0,2,0) so it
   beats the existing 0,1,0 dark rules regardless of source order. No !important.
   ══════════════════════════════════════════════════════════════════════ */

/* ── card shell: no more boxed dark card — the question sits on the page,
   like a column of print, not a UI panel. Width/max-width are left to the
   base rule; only the "card chrome" properties are touched. ── */
.bs .problem-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* ── folio + stem lockup ──────────────────────────────────────────────
   Requires new markup: a <div class="bs-stemrow"> wrapping a new
   <div class="bs-folio">NN</div> immediately followed by the existing
   stem element (the same .stem-block or .problem-text node already built —
   only its parent changes, so renderMath(stemNode) etc. keep working).
   Two children, two columns: auto-placement needs no grid-column overrides. */
.bs .problem-card .bs-stemrow {
  display: grid;
  grid-template-columns: minmax(56px, 92px) minmax(0, 1fr);
  column-gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
  margin-top: 4px;
}
.bs .bs-folio {
  font-family: var(--bs-ed);
  font-variation-settings: normal;
  font-weight: 900;
  font-size: clamp(30px, 2vw + 18px, 52px);
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--bs-blue);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── the math stem: the editorial voice. Fluid clamp lands ~34-47px across
   real desktop widths and eases down naturally on phones without a separate
   breakpoint — a container-width-driven curve stays flat forever, but this
   card's own max-width caps the growth anyway. ── */
.bs .problem-card .problem-text {
  font-family: var(--bs-ed);
  font-variation-settings: normal;
  font-weight: 900;
  /* Tuned down from 47px/29ch after seeing it live: that ran a real SAT stem six
     lines deep and pushed the ballot below the fold. Editorial display type has
     to survive a 30-word question, not just a headline. */
  font-size: clamp(24px, 1.1vw + 18px, 33px);
  line-height: 1.2;
  letter-spacing: -.026em;
  text-wrap: pretty;
  max-width: 44ch;
  color: var(--bs-ink);
  word-break: normal;
  overflow-wrap: break-word;
}

/* Lede and deck. A long stem set entirely in Fraunces 900 is a wall — the
   client's note was that the face "is fun and has character but sometimes it is
   hard to read". So on long stems the SCENARIO drops to the instrumentation
   face at a reading size and the display treatment is reserved for the sentence
   that actually asks something. Short stems never take this branch and keep the
   full display voice. */
.bs .problem-card .problem-text.has-ask {
  font-family: var(--bs-ui);
  font-variation-settings: 'wdth' 100;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.002em;
  /* Prose wants a longer measure than display type does. */
  max-width: 62ch;
}
.bs .problem-card .problem-text.has-ask .bs-setup { color: var(--bs-ink-2); }
.bs .problem-card .problem-text.has-ask .bs-ask {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -.024em;
  color: var(--bs-ink);
  /* Its own line: the question is the thing being asked, not a clause. */
  display: block;
  margin-top: 12px;
  /* Correct optical sizing widened the figures, so an ask that used to just fit
     can now wrap and strand a single character.
     `pretty`, not `balance`: balance re-flows the whole block to even the lines,
     and with an inline-block fraction in the sentence it chose to break right
     after it — stranding the sentence's own full stop at the head of line two
     (". What is the value of a?"). `pretty` only protects the last line. */
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .bs .problem-card .problem-text.has-ask { font-size: 16px; }
  .bs .problem-card .problem-text.has-ask .bs-ask { font-size: 21px; }
}
.bs .stem-para { margin: 0 0 16px; }
.bs .stem-para:last-child { margin-bottom: 0; }


/* ── R&W: a 47px serif is wrong for a 200-word passage, so the reading
   stem (the short question AFTER the passage) and the passage itself both
   read as instrumentation, not editorial display type. The stem gets a touch
   more weight/ink than the passage body since it's the thing being answered. ── */
.bs .problem-card.reading-card .stem-block {
  font-family: var(--bs-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--bs-ink);
  max-width: 58ch;
}
.bs .passage-block {
  margin: 16px 0 26px;
  padding: 22px 26px;
  background: var(--bs-sheet);
  border: none;
  border-left: 3px solid var(--bs-blue);
  border-radius: var(--radius);
  font-family: var(--bs-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-ink-2);
  max-width: 64ch;
}
.bs .passage-block p { margin: 0 0 14px; }
.bs .passage-block p:last-child { margin-bottom: 0; }
.bs .passage-block .text-label {
  display: block;
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-bottom: 10px;
}
.bs .passage-block .stimulus-block {
  display: block;
  margin: 14px 0;
  padding: 16px 20px;
  background: var(--bs-stock);
  border: 1px solid var(--bs-rule);
  border-radius: 0;
  font-family: var(--bs-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bs-ink-2);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}
.bs .passage-block .stimulus-block .stim-title {
  display: block;
  font-family: var(--bs-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-blue);
  margin-bottom: 8px;
  white-space: normal;
}
/* A stimulus-block can itself wrap a .problem-table (bar-chart-style data) —
   reset the inherited "pre" whitespace so cell text doesn't preserve it. */
.bs .stimulus-block .problem-table { white-space: normal; }

.bs .problem-table {
  border-collapse: collapse;
  margin: 16px 0;
  font-family: var(--bs-ui);
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}
.bs .problem-table td {
  border: 1px solid var(--bs-rule);
  padding: 8px 16px;
  text-align: center;
  word-break: break-word;
}
.bs .problem-table td:first-child { text-align: left; }
.bs .problem-table tr:first-child td {
  font-family: var(--bs-ui);
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  background: var(--bs-stock-2);
}

/* ── figures: black line art on white is the whole reason for going light —
   var(--bs-sheet) + a hairline rule frame instead of a hard #fff slab, so
   the diagram reads as printed on the page rather than punched through it. ── */
.bs .problem-figures {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.bs .problem-figure {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bs-sheet);
  border: 1px solid var(--bs-rule);
  padding: 16px;
  cursor: zoom-in;
  transition: box-shadow .15s ease;
}
.bs .problem-figure:hover { box-shadow: 0 0 0 1px var(--bs-ink) inset; }
/* SAT R&W figures are full source-PDF pages — already near-white, so the
   frame carries the paper integration instead of a background swap. */
.bs .problem-card.reading-card .problem-figure {
  max-height: 82vh;
  background: var(--bs-sheet);
  padding: 0;
  width: 100%;
}
.bs .problem-figure.zoomed { max-height: none; cursor: zoom-out; }

/* ── meta row: printed tags, not chrome pills. One solid ink tag (contest
   family), one wire tag (subdomain), plain mono labels otherwise (#, year).
   Per-subject colour (green/teal/purple) is deliberately dropped here — this
   system has exactly one accent (blue) and semantics stay reserved for
   correct/incorrect; family is now distinguished by label text, not colour. ── */
.bs .problem-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.bs .badge {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 0;
  background: none;
  border: none;
  color: var(--bs-ink-3);
}
.bs .badge.gold,
.bs .badge.mathcounts,
.bs .badge.sat,
.bs .badge.reading {
  background: var(--bs-ink);
  color: var(--bs-stock);
  padding: 5px 10px;
}
.bs .badge.subdomain {
  border: 1px solid var(--bs-rule);
  padding: 4px 9px;
  color: var(--bs-ink-2);
  background: none;
}
/* Retry gets the accent, never the pen — pen is marginalia only. */
.bs .badge.retry {
  border: 1px solid var(--bs-blue);
  color: var(--bs-blue);
  background: none;
  padding: 4px 9px;
}
.bs .q-timer {
  margin-left: auto;
  font-family: var(--bs-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bs-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── report link ── */
.bs .report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--bs-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--bs-ink-3);
  opacity: 1;
}
.bs .report-link:hover { color: var(--bs-ink); text-decoration: underline; }
.bs .report-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.bs .report-link.reported { cursor: default; text-decoration: none; color: var(--bs-ink-2); }

/* ── practice body: paper ground, top-aligned (unchanged flex), generous
   but not wasteful padding. ── */
.bs .practice-body {
  background: var(--bs-stock);
  padding: clamp(20px, 3.4vh, 40px) 24px 56px;
}

/* ══ responsive ══ */
@media (max-width: 700px) {
  .bs .problem-card .bs-stemrow {
    grid-template-columns: minmax(40px, 60px) minmax(0, 1fr);
    column-gap: 14px;
  }
  .bs .bs-folio { font-size: clamp(30px, 8vw, 46px); }
}
@media (max-width: 560px) {
  .bs .practice-body { padding: 16px 12px 40px; }
  .bs .problem-card .bs-stemrow {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .bs .bs-folio { text-align: left; font-size: 26px; line-height: 1; }
  .bs .passage-block { padding: 16px 16px; font-size: 15px; }
  .bs .problem-card.reading-card .stem-block { font-size: 15.5px; }
  .bs .problem-figure { max-height: 280px; padding: 10px; }
  .bs .problem-card.reading-card .problem-figure { max-height: 70vh; }
}

/* ══ motion / focus ══ */
@media (prefers-reduced-motion: reduce) {
  .bs .problem-figure { transition: none; }
}