/* SCHEDULE 1 arm.css - PATCH NOTES skin (2026-07-03 reskin).
   Per-arm identity in the patch-notes system is the small colored chip/square
   (LAB GREEN #3f8a54) plus honest version chips; the graph-paper motif is retired
   in favor of the shared single blue rule under the header. The signal BLUE from
   base.css carries links + primary actions; lab green is the arm's quiet accent
   (question numbers, live emphasis, the arm chip).

   Layout doctrine R6 (hierarchy tiers) is UNCHANGED:
     tier-1  the three numbered question labels + the answer profit figure
     tier-2  secondary section headers (the "Check a specific mix" header)
     tier-3  reference headers (details.spec summaries) - smallest, dimmest.
   The dominance order top-to-bottom stays: answer profit figure > H1 > question
   labels > everything else. No two tiers render at the same size.

   Accessibility floor (2026-07-03, binding) preserved: 44px tap targets, 14px+
   sentence-case gating labels, 16px meaning-carrying text. */

:root {
  /* the arm's quiet accent = lab green; primary/link signal stays base blue */
  --accent: #3f8a54;
  --accent-ink: #2e7d4f;
}

/* per-arm chip color, if the hub or an in-page chip needs it */
.arm-chip.arm-lab { background: var(--arm-lab); }

/* ---------- motif: retired graph-paper -> shared blue rule shows through ---------- */
/* The HTML still carries class="motif-rule graph-rule"; graph-rule is now a no-op
   so the base 2px blue .motif-rule renders as the single patch-notes motif. */
.graph-rule { height: 2px; border: 0; background: var(--blue); background-image: none; }

/* ---------- lead sub-line under H1: ONE short small slate line (finding 3) ---------- */
.lead-sub {
  font-size: 15px; color: var(--slate); margin: 6px 0 0; line-height: 1.45;
  max-width: 42em;
}

/* ---------- version note -> a collapsed <details> (finding 4) ----------
   Summary is ONE small mono line; the full provenance sentence is the expanded
   content. Discoverable to anyone who looks, near-invisible otherwise. */
.version-plate {
  margin: 12px 0 2px; border: 1px solid var(--hair); border-radius: 3px;
  background: var(--panel);
}
.version-plate summary {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--slate-soft);
  letter-spacing: 0; padding: 7px 10px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.version-plate summary::-webkit-details-marker { display: none; }
.version-plate summary::after {
  content: "+"; font-family: var(--mono); font-size: 0.9rem;
  color: var(--slate-soft); margin-left: auto;
}
.version-plate[open] summary::after { content: "\2212"; }
.version-plate .version-detail {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--slate);
  line-height: 1.5; margin: 0; padding: 0 10px 9px;
}

/* =========================================================================
   TIER 1 - the numbered questions (the flow anchors)
   ========================================================================= */
/* HIERARCHY TIER 2 - the numbered questions. Clearly second to the H1: 20px bold,
   accent-colored number. (H1 = 30px in base.css; profit figure is the answer star.) */
.q-block { margin: 20px 0; }
.q-label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.q-num {
  font-family: var(--mono); font-weight: 700; font-size: 20px;
  letter-spacing: 0; color: var(--accent-ink);
}
.q-sep { font-family: var(--mono); font-size: 20px; color: var(--slate-soft); }
.q-text {
  font-family: var(--sans); font-weight: 700; font-size: 20px;
  letter-spacing: 0; color: var(--ink);
}

/* ---------- 01 product groups + strains ---------- */
.product-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.product-btn {
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.product-btn:hover { border-color: var(--slate); }
.product-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Strains are a SUBORDINATE sub-choice of Weed, not a fifth category (finding 5):
   indented under the Weed group with a connective marker, visibly smaller buttons. */
.strain-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0;
  margin-left: 16px; padding: 6px 0 0 12px;
  border-left: 2px solid var(--hair-strong);
}
.strain-marker {
  font-family: var(--mono); font-size: 0.75rem; color: var(--slate-soft);
  letter-spacing: 0; margin-right: 4px; flex: none;
}
.strain-btn {
  min-height: 44px; padding: 4px 10px;
  border: 1px solid var(--hair); border-radius: 4px;
  background: var(--page); color: var(--slate);
  font-family: var(--mono); font-size: 0.8125rem; cursor: pointer;
}
.strain-btn:hover { border-color: var(--slate); color: var(--ink); }
.strain-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- 02 rank select + ingredient chips ---------- */
.rank-wrap { display: flex; flex-direction: column; gap: 6px; }
.rank-inline-label {
  font-family: var(--mono); font-size: 0.875rem; font-weight: 700; color: var(--ink);
}
.rank-select {
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; cursor: pointer; max-width: 100%;
}
.rank-select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.rank-source { font-family: var(--mono); font-size: 0.875rem; color: var(--slate); margin: 6px 0 0; }

.ing-adjust { margin: 12px 0 0; border-top: 1px solid var(--hair); }
.ing-adjust summary {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 12px 2px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ing-adjust summary::-webkit-details-marker { display: none; }
.ing-adjust summary::after { content: "+"; font-family: var(--mono); font-size: 1rem; color: var(--slate-soft); }
.ing-adjust[open] summary::after { content: "\2212"; }
.ing-chip-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 0 12px;
}
@media (min-width: 480px) { .ing-chip-grid { grid-template-columns: repeat(4, 1fr); } }
.ing-chip {
  min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--hair); border-radius: 4px;
  background: var(--panel); color: var(--slate-soft);
  font-family: var(--mono); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  opacity: 0.6;
}
.ing-chip.on { background: var(--panel); color: var(--ink); opacity: 1; border-color: var(--blue); }
.ing-chip .chip-name { font-size: 0.9rem; font-weight: 600; text-align: left; }
.ing-chip .chip-cost { font-size: 0.85rem; flex: none; }

/* ---------- 03 depth stepper (finding 7): compact minus / value / plus ---------- */
.depth-stepper {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--hair-strong); border-radius: 4px; overflow: hidden;
  background: var(--panel);
}
.step-btn {
  min-height: 44px; min-width: 44px; padding: 0;
  border: 0; background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.step-btn:hover:not(:disabled) { background: var(--page); color: var(--blue-ink); }
.step-btn:disabled { color: var(--hair-strong); cursor: not-allowed; }
.step-dec { border-right: 1px solid var(--hair-strong); }
.step-inc { border-left: 1px solid var(--hair-strong); }
.step-value {
  min-width: 52px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--ink);
}
.depth-help { font-family: var(--mono); font-size: 0.875rem; color: var(--slate); margin: 8px 0 0; }
.depth-limit { font-family: var(--mono); font-size: 0.8125rem; color: var(--slate-soft); margin: 4px 0 0; line-height: 1.45; max-width: 44em; }

/* =========================================================================
   THE ANSWER - patch-notes result block; profit is the star (largest on page)
   The base .answer-plate already supplies the 2px-bordered light result block.
   ========================================================================= */
.answer-section { margin: 22px 0 10px; }
.answer-q-label {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink);
  margin: 0 0 8px; line-height: 1.4;
}
.search-status {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--slate-soft);
  margin: 0 0 8px; line-height: 1.4;
}
.mix-plate {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.mix-plate.searching .plate-money .pm-value,
.mix-plate.searching .plate-steps,
.mix-plate.searching .plate-effects { opacity: 0.35; }
.mix-plate.searching::before {
  content: "searching..."; font-family: var(--mono); font-size: 0.85rem;
  color: var(--slate-soft); position: absolute; top: 8px; right: 60px;
}

/* PROFIT-FIRST answer block (finding 6): profit is the star and comes first, with
   Cost + Sell as small metrics beside it; the numbered sequence steps sit UNDER,
   then effects smallest. */
.plate-money { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 0 0 12px; }
.plate-secondary { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-bottom: 6px; }
.plate-metric { display: flex; flex-direction: column; }
.plate-metric .pm-label {
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0;
  color: var(--slate); font-weight: 400; margin-bottom: 2px;
}
/* Cost + Sell are the SMALL supporting metrics beside the profit star (R6). */
.pm-secondary .pm-value { font-family: var(--mono); font-weight: 700; font-size: 1rem; line-height: 1.1; color: var(--ink); }
.pm-secondary .pm-label { color: var(--slate-soft); }
/* PROFIT = the star number: the single largest text element on the page. */
.pm-star .pm-value {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(2.6rem, 15vw, 4.4rem); line-height: 1; color: var(--ink);
  letter-spacing: -0.01em;
}
.pm-star .pm-label { font-size: 1rem; color: var(--slate); }

.plate-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; width: 100%; }
.plate-step {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--hair-strong); border-radius: 3px;
  padding: 4px 8px; font-family: var(--mono); background: var(--page);
}
.plate-step .ps-num { font-size: 0.7rem; color: var(--slate-soft); }
.plate-step .ps-name { font-size: 0.9rem; color: var(--ink); }
.plate-empty { font-family: var(--mono); font-size: 0.95rem; color: var(--slate-soft); }

.plate-effects {
  font-family: var(--mono); font-size: 0.85rem; color: var(--slate);
  margin: 10px 0 0; width: 100%; line-height: 1.5;
}
.plate-effects .plate-fx-label { color: var(--ink); font-weight: 700; }

.btn-share {
  flex: none; font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0; background: var(--panel); color: var(--ink);
  border: 1px solid var(--hair-strong); border-radius: 4px;
  min-height: 44px; padding: 10px 16px; cursor: pointer;
}
.btn-share:hover { border-color: var(--slate); }

/* runners-up: two compact rows */
.runners-up { margin: 10px 0 0; }
.runners-label {
  font-family: var(--mono); font-size: 0.875rem; font-weight: 700; color: var(--slate);
  margin: 0 0 6px;
}
.runner-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--hair); border-radius: 4px; background: var(--panel);
  color: var(--ink); font-family: var(--mono); cursor: pointer;
  padding: 10px; margin: 0 0 6px; min-height: 44px;
}
.runner-row:hover, .runner-row:active { border-color: var(--blue); }
.runner-row .rr-rank { font-size: 0.8rem; color: var(--slate-soft); flex: none; width: 2.4em; }
.runner-row .rr-seq { font-size: 0.9rem; flex: 1 1 auto; overflow-wrap: anywhere; }
.runner-row .rr-profit { font-size: 1rem; font-weight: 700; flex: none; }

/* =========================================================================
   TIER 2 - "Check a specific mix" (the demoted forward mixer)
   ========================================================================= */
/* HIERARCHY TIER 3 - secondary tool section header ("Check a specific mix"): 17px,
   visibly smaller than the 20px questions, larger than the 15px reference headers. */
.fwd-section { margin: 30px 0 8px; border-top: 1px solid var(--hair-strong); padding-top: 14px; }
.fwd-header {
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  text-transform: none; letter-spacing: 0; margin: 0 0 4px; color: var(--ink);
}
.fwd-intro { font-family: var(--sans); font-size: 0.875rem; color: var(--slate); margin: 0 0 12px; }

/* Forward plate is the DEMOTED secondary tool (tier-2); body-scale numbers. */
.fwd-plate .answer-big { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }
.fwd-plate .plate-metric .pm-label {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0;
  color: var(--slate-soft); font-weight: 400; margin-bottom: 2px;
}
.fwd-plate .plate-metric .pm-value { font-size: 1rem; font-weight: 700; line-height: 1.1; color: var(--ink); }

.product-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.product-row .product-btn { font-size: 0.9rem; padding: 6px 10px; }
.ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0 0 4px; }
@media (min-width: 480px) { .ing-grid { grid-template-columns: repeat(4, 1fr); } }
.ing-btn {
  min-height: 46px; padding: 6px 8px;
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.ing-btn:hover, .ing-btn:active { border-color: var(--blue); }
.ing-btn .ib-name { font-size: 0.9rem; font-weight: 600; text-align: left; }
.ing-btn .ib-cost { font-size: 0.85rem; color: var(--slate); flex: none; }

.seq-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; min-height: 20px; }
.seq-step {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 0.9rem; cursor: pointer;
  min-height: 44px; padding: 6px 10px;
}
.seq-step .ss-num { font-size: 0.75rem; color: var(--slate-soft); letter-spacing: 0; }
.seq-step .ss-x { color: var(--blue-ink); font-weight: 700; }
.seq-step:hover { border-color: var(--blue); }

.seq-empty { font-family: var(--mono); font-size: 0.875rem; color: var(--slate); }

.effects-out { margin: 4px 0 6px; }
.effects-label {
  font-family: var(--mono); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0; color: var(--slate); margin: 10px 0 6px;
}
.effect-list { display: flex; flex-wrap: wrap; gap: 6px; }
.effect-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--hair-strong); border-radius: 3px;
  background: var(--page); padding: 4px 9px;
  font-family: var(--mono); font-size: 0.875rem; color: var(--ink);
}
.effect-chip .ec-mult { font-size: 0.8rem; color: var(--slate-soft); }
.effect-none { font-family: var(--mono); font-size: 0.875rem; color: var(--slate); }
.cap-note { font-family: var(--mono); font-size: 0.8rem; color: var(--blue-ink); margin: 8px 0 0; }

/* =========================================================================
   HIERARCHY TIER 4 - bottom reference (effects table, ingredient docs, FAQ).
   The SMALLEST, slate-toned headers: 15px (the accessibility floor), so nothing
   down here competes with the 17px secondary tool header or the 20px questions.
   ========================================================================= */
.blocks details.spec summary {
  font-size: 15px; font-weight: 600; color: var(--slate);
}
/* Question-phrased H2 lives INSIDE the summary so the reference section carries a
   real semantic heading with ZERO visual change: it inherits the tier-4 summary
   size/tone and renders inline, exactly as the old plain-text summary did. */
.blocks details.spec summary .spec-h2 {
  display: inline; margin: 0; font-size: inherit; font-weight: inherit;
  color: inherit; font-family: inherit; text-transform: none; letter-spacing: 0;
  line-height: inherit;
}
.fx-table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 14px; }
.fx-table th, .fx-table td { border-bottom: 1px solid var(--hair); padding: 8px 10px; text-align: left; }
.fx-table th { color: var(--slate); font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--hair-strong); }
.fx-table td.num { text-align: right; }

.ing-doc { margin: 10px 0 0; }
.ing-doc h3 {
  font-family: var(--sans); font-size: 15px; margin: 12px 0 4px;
  text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--slate);
}
.ing-doc .id-default { font-family: var(--sans); font-size: 1rem; margin: 2px 0 4px; color: var(--ink); }
.ing-doc ul { margin: 4px 0 10px; padding-left: 18px; font-size: 1rem; }
.ing-doc li { margin: 3px 0; }

/* =========================================================================
   BEST MIXES page (/schedule-1/best-mixes/) - ANSWER-FIRST, not a table dump.
   The visitor's real question is "what is THE best mix?" (R1/R2), so the page
   leads with the single highest-profit mix on a result plate, then per-product
   cards in profit order. Hierarchy (R9): the profit figures dominate - the lead
   profit is the single largest number on the page, card profits are second, the
   H1 and card names sit under them, chips + effects smallest. Runner-ups are
   collapsed (nobody lands here for rank 2-3). Version line is quiet (R12).
   ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bm-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 8px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--hair);
}
/* jump/print bar sits BELOW the cards so the lead answer + first card own the
   fold; a top rule instead of a bottom one. */
.bm-toolbar-below {
  margin: 16px 0 8px; padding: 12px 0 0;
  border-bottom: 0; border-top: 1px solid var(--hair);
}
.bm-jump { display: flex; flex-wrap: wrap; gap: 4px 6px; font-family: var(--mono); font-size: 13.5px; flex: 1 1 auto; }
.bm-jump a {
  color: var(--slate); border: 1px solid transparent; border-radius: 3px;
  padding: 5px 8px; min-height: 30px; display: inline-flex; align-items: center;
}
.bm-jump a:hover { color: var(--blue); border-color: var(--hair-strong); text-decoration: none; }
.bm-print {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  color: var(--blue-ink); background: var(--panel);
  border: 1px solid var(--hair-strong); border-radius: 4px;
  min-height: 44px; padding: 8px 14px; cursor: pointer; flex: none;
}
.bm-print:hover { border-color: var(--blue); }
.bm-intro { margin-top: 12px; font-size: 15px; color: var(--slate); max-width: 46em; }

/* Numbered ingredient CHIPS (shared by lead + cards + runner-ups). NOT prose. */
.bm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bm-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--hair-strong); border-radius: 3px;
  padding: 4px 8px; font-family: var(--mono); background: var(--page);
  white-space: nowrap;
}
.bm-chip .bm-ci { font-size: 0.7rem; color: var(--slate-soft); }
.bm-chip .bm-cn { font-size: 0.9rem; color: var(--ink); }

/* Open-in-calculator action (shared). 44px tap target. */
.bm-open {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--hair-strong); border-radius: 4px;
  min-height: 44px; padding: 10px 16px; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.bm-open:hover { border-color: var(--blue); color: var(--blue-ink); text-decoration: none; }

/* ---------- THE LEAD ANSWER: "best mix right now" result plate ---------- */
/* The 2px-bordered result block from the DESIGN doctrine (not the sticky flex
   .answer-plate, which is for the live tool). Profit is the single largest
   number on the whole page (R9). */
.bm-lead { margin: 2px 0 2px; }
.bm-lead-plate {
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--border-2); border-radius: 4px;
  padding: 14px 16px;
}
.bm-lead-q {
  font-family: var(--sans); font-weight: 700; font-size: 19px;
  color: var(--ink); margin: 0 0 8px; line-height: 1.25;
}
.bm-lead-top {
  display: flex; align-items: flex-end; gap: 8px 24px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.bm-lead-money { display: flex; flex-direction: column; }
.bm-lead-money .bm-lm-label {
  font-family: var(--mono); font-size: 0.95rem; color: var(--slate); margin-bottom: 2px;
}
.bm-lead-money .bm-lm-value {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(2.4rem, 13vw, 4.2rem); line-height: 1; color: var(--ink);
  letter-spacing: -0.01em;
}
.bm-lead-for {
  font-family: var(--sans); font-size: 15px; color: var(--slate);
  padding-bottom: 8px;
}
.bm-lead-for strong { color: var(--ink); font-weight: 700; }
.bm-lead-chips { margin: 0 0 12px; }

/* ---------- per-product CARDS (profit order) ---------- */
.bm-cards { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; }
.bm-card {
  border: 1px solid var(--hair-strong); border-radius: 4px;
  background: var(--panel); padding: 14px 16px; scroll-margin-top: 12px;
}
.bm-card-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap; margin: 0 0 10px;
}
.bm-card-name {
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  color: var(--ink); margin: 0; line-height: 1.2;
}
.bm-card-name .bm-fam { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--slate-soft); display: block; margin-top: 2px; }
/* Card profit = tier-2 star: big mono, second only to the lead profit (R9). */
.bm-card-profit {
  font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--accent-ink); flex: none;
}
.bm-card-profit .bm-cp-label { font-size: 0.7rem; color: var(--slate-soft); font-weight: 400; display: block; text-align: right; }
.bm-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.bm-card-row .bm-chips { flex: 1 1 auto; }
.bm-card-meta {
  font-family: var(--mono); font-size: 0.8rem; color: var(--slate-soft);
  margin: 8px 0 0;
}
.bm-guided {
  font-family: var(--mono); font-size: 0.8rem; color: var(--blue-ink);
  margin: 8px 0 0; line-height: 1.45;
}

/* runner-ups: collapsed details, "2nd and 3rd best" */
.bm-runners { margin: 10px 0 0; border-top: 1px solid var(--hair); }
.bm-runners summary {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--slate);
  padding: 9px 2px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; min-height: 30px;
}
.bm-runners summary::-webkit-details-marker { display: none; }
.bm-runners summary::after { content: "+"; font-family: var(--mono); color: var(--slate-soft); margin-left: auto; }
.bm-runners[open] summary::after { content: "\2212"; }
.bm-runner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; padding: 10px 0 0;
}
.bm-runner .bm-rr-rank { font-family: var(--mono); font-size: 0.75rem; color: var(--slate-soft); flex: none; }
.bm-runner .bm-chips { flex: 1 1 auto; }
.bm-runner .bm-rr-profit { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--accent-ink); flex: none; }
.bm-runner .bm-open { min-height: 40px; padding: 8px 12px; font-size: 13px; }

.bm-how { margin: 30px 0 0; border-top: 1px solid var(--hair-strong); padding-top: 14px; }
.bm-how h2 { font-family: var(--sans); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--ink); }
.bm-how p { font-size: 15px; color: var(--slate); max-width: 46em; }

/* PRINT: the page becomes a clean cheat sheet - EVERY product's rank-1 as a row.
   Drop chrome, the lead plate border, the Open buttons, and the collapsed
   runner-ups; keep name + profit + chips, black on white, no break inside a card. */
@media print {
  .bm-toolbar, .bm-open, .bm-runners, .bm-intro a::after, .bm-lead-for, .bm-how { display: none !important; }
  .bm-lead { margin: 0 0 8px; }
  .bm-lead-plate { border: 0 !important; padding: 0 !important; }
  .bm-lead-money .bm-lm-value { font-size: 22pt; }
  .bm-cards { gap: 8px; }
  .bm-card { page-break-inside: avoid; border: 0; border-bottom: 1px solid #000; border-radius: 0; padding: 6px 0; }
  .bm-card-profit { font-size: 14pt; color: #000; }
  .bm-card-name, .bm-chip .bm-cn, .bm-lead-money .bm-lm-value, .bm-lead-money .bm-lm-label { color: #000; }
  .bm-chip { border-color: #000; background: transparent; }
  .lead-sub { color: #000; }
}