/* ---------------------------------------------------------------------------
   The backtest page, to its own design file. Loaded after shell.css so the
   rail, header and tab bar are the site's, and only the content differs.

   The benchmark switch is two radio buttons: every figure is rendered for both
   the Russell 2000 and the S&P 500, and CSS decides which is visible. No
   script, so it works under `script-src 'self'` and before any bundle loads.
   --------------------------------------------------------------------------- */
.bt { padding: 0 12px 90px; }
.btog { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
/* default view is the size-matched benchmark — the honest one */
.spx { display: none; }
#bSPX:checked ~ * .spx, #bSPX:checked ~ .btcard .spx { display: inline; }
#bSPX:checked ~ * .r2k, #bSPX:checked ~ .btcard .r2k { display: none; }
#bSPX:checked ~ * span.bwrap.spx { display: inline-block; }
#bR2K:checked ~ * span.bwrap.r2k { display: inline-block; }
.bwrap.spx { display: none; }

/* ---------- hero ---------- */
.bthero {
  padding: 30px 0 34px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .72fr);
  gap: 40px; align-items: end;
}
@media (max-width: 900px) { .bthero { grid-template-columns: 1fr; gap: 24px;
                                      padding: 18px 0 24px; } }
.btchips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid #2A3037;
  border-radius: 999px; padding: 6px 12px; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .16em; color: #8FD4A0;
}
/* Named srcdot, not "live". styles.css carries .live { margin-left:auto }
   for the header's LIVE indicator, which is supposed to be pushed to the
   right — and this page loads both sheets, so the chip inherited a 239px
   auto margin and floated away from the headline it belongs above
   (2026-09-02). A shared class name is a shared decision; this one is
   scoped to the report. */
.chip.srcdot::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                     background: #8FD4A0; }
.switch { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border);
          border-radius: 10px; padding: 4px; background: var(--surface);
          flex: none; white-space: nowrap; width: max-content; }
/* Named bmk, not sw. styles.css defines .sw as the account page's toggle
   SWITCH — flex:0 0 auto; width:36px; HEIGHT:20px; padding:2px — and this
   page loads that sheet too. report.css won on padding and font but never
   set a height, so the benchmark buttons stayed locked at 20px while their
   text needed 17.25px plus 10px of padding: visibly squashed, and the
   second class-name collision in this same hero (2026-09-02). Two- and
   three-letter class names are shared decisions across the whole site;
   anything scoped to this report gets a name only this report uses. */
.bmk-k { font-family: "JetBrains Mono", monospace; font-size: 10.5px;
         letter-spacing: .14em; color: #666E76; padding: 0 6px; }
.bmk { cursor: pointer; padding: 6px 12px; border-radius: 7px; font-size: 11.5px;
       font-weight: 600; color: #8B939B; display: inline-flex; align-items: center;
       line-height: 1.15; white-space: nowrap; }
.bmk:hover { color: var(--ink); }
/* The CONTROL carries bmk-r2k / bmk-spx, never the bare r2k / spx. Those
   two mean "content belonging to this benchmark" and are hidden by
   "#bSPX:checked ~ * .r2k { display:none }" — which also hid the Russell
   BUTTON, so once you picked S&P there was no way back without reloading
   (2026-09-02). The old rule survived that only because it carried
   "display:inline-block !important", which I removed while renaming the
   class without noticing it was load-bearing. Separating identity from
   content removes the need for !important at all. */
#bR2K:checked ~ * label.bmk-r2k, #bSPX:checked ~ * label.bmk-spx {
  background: var(--accent); color: var(--on-accent);
}

.bt h1 {
  font-weight: 800; font-size: 54px; line-height: 1.03; letter-spacing: -.03em;
  margin: 20px 0 0; text-wrap: balance;
}
@media (max-width: 900px) { .bt h1 { font-size: 34px; } }
.btlede { font-size: 16.5px; line-height: 1.65; color: var(--ink-2);
          margin-top: 20px; max-width: 66ch; text-wrap: pretty; }
.btlede b { color: var(--ink); font-weight: 600; }

.verdict { border: 1px solid var(--border); border-radius: 18px;
           background: var(--surface); padding: 22px 24px; }
.sk { font-family: "JetBrains Mono", monospace; font-size: 10.5px;
      letter-spacing: .16em; color: #666E76; }
.vbig { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 50px;
        line-height: 1; letter-spacing: -.04em; margin-top: 12px; }
.vsub { font-size: 12.5px; color: #7C848C; margin-top: 10px; line-height: 1.55; }
.vrule { height: 1px; background: #14181C; margin: 18px 0; }
.hr-row { display: flex; align-items: baseline; justify-content: space-between;
          padding: 7px 0; gap: 12px; }
.hr-row .k { font-size: 12.5px; color: var(--ink-2); }
.hr-row .v { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.hr-row .v.dim { color: var(--ink-2); }

/* ---------- benchmark callout ---------- */
.btcall {
  border: 1px solid #2A3037; border-radius: 18px;
  background: linear-gradient(180deg, rgba(198,242,78,.05), transparent 70%), var(--surface);
  padding: 24px 26px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 32px; align-items: center;
}
@media (max-width: 900px) { .btcall { grid-template-columns: 1fr; gap: 20px; } }
.bt-h2 { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.bt-h3 { font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.btcall p { font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
            margin-top: 10px; text-wrap: pretty; }
.bcomp { display: grid; gap: 10px; }
.bc { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px;
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      background: #08090C; }
.bc1 { font-size: 12.5px; font-weight: 600; }
.bc2 { font-family: "JetBrains Mono", monospace; font-size: 10.5px;
       letter-spacing: .14em; color: #666E76; margin-top: 4px; }
.bcv { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 21px; }

/* ---------- shared bars ---------- */
.bwrap { position: relative; display: inline-block; width: 100%; height: 26px;
         border-radius: 6px; background: #08090C; border: 1px solid #14181C;
         vertical-align: middle; }
.bz { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #2A3037; }
.bfill { position: absolute; top: 3px; bottom: 3px; border-radius: 0 4px 4px 0; }
.bfill.neg { border-radius: 4px 0 0 4px;
             background: linear-gradient(270deg, rgba(255,107,107,.35), #FF6B6B); }
.bfill.pos { background: linear-gradient(90deg, rgba(143,212,160,.35), #8FD4A0); }
.pos { color: #8FD4A0; } .neg { color: #FF6B6B; } .flat { color: var(--ink-2); }

/* ---------- overview chart ---------- */
.btcard { margin-top: 16px; border: 1px solid var(--border); border-radius: 18px;
          background: var(--surface); padding: 24px 26px; }
.ov-head { display: flex; align-items: baseline; justify-content: space-between;
           gap: 20px; flex-wrap: wrap; }
.ov { margin-top: 18px; display: grid; gap: 11px; }
.ov-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 84px;
          align-items: center; gap: 16px; }
@media (max-width: 760px) { .ov-row { grid-template-columns: 1fr 64px;
                                      grid-template-areas: "n v" "b b"; }
                            .ov-n { grid-area: n; } .ov-v { grid-area: v; }
                            .bwrap { grid-area: b; } }
.ov-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ov-n b { display: block; font-size: 13px; font-weight: 600; }
.ov-n i { display: block; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
          color: #666E76; letter-spacing: .1em; margin-top: 3px; font-style: normal; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.big { width: 10px; height: 10px; }
.ov-v { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700;
        text-align: right; }
.scale { margin-top: 14px; letter-spacing: .12em; color: #4A5158; }

/* ---------- section rule ---------- */
.btrule { margin-top: 46px; display: flex; align-items: baseline; gap: 14px; }
.btrule .bt-h2 { font-size: 26px; }
.btrule i { flex: 1; height: 1px; background: #16191D; }

/* ---------- strategy cards ---------- */
.scard { margin-top: 18px; border: 1px solid var(--border); border-radius: 18px;
         background: var(--surface); overflow: hidden; }
.shead { padding: 20px 24px; border-bottom: 1px solid #14181C;
         display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.st { flex: 1; min-width: 200px; }
.st1 { font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.st2 { font-size: 12.5px; color: #7C848C; margin-top: 4px; }
.sright { text-align: right; }
.sh-v { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 26px;
        letter-spacing: -.03em; margin-top: 4px; }
.sbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
@media (max-width: 900px) { .sbody { grid-template-columns: 1fr; } }
.spane { padding: 18px 24px 22px; }
.spane + .spane { border-left: 1px solid #14181C; }
@media (max-width: 900px) { .spane + .spane { border-left: 0;
                                              border-top: 1px solid #14181C; } }
.stable { display: grid; gap: 0; }
.srow { display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr));
        gap: 0 8px; align-items: center; padding: 11px 0;
        border-bottom: 1px solid #0F1216;
        font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.srow.head { font-size: 10px; letter-spacing: .12em; color: #666E76;
             padding-bottom: 9px; border-bottom: 1px solid #14181C; }
.srow .n { text-align: right; }
.srow .dim { color: #7C848C; }
.srow .sh { color: #8B939B; }
.srow.hi .sh { color: var(--ink); font-weight: 700; }
.srow.hi .r2k, .srow.hi .spx { font-weight: 700; }
.srow .sig { color: #FF6B6B; }
.sfoot { display: flex; gap: 18px; margin-top: 12px;
         font-family: "JetBrains Mono", monospace; font-size: 10.5px;
         letter-spacing: .12em; color: #4A5158; }
.years { margin-top: 14px; display: grid; gap: 8px; }
.yrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 58px;
        align-items: center; gap: 10px; }
.yrow .bwrap { height: 16px; border-radius: 4px; }
.yy { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #7C848C; }
.yv { font-family: "JetBrains Mono", monospace; font-size: 11px; text-align: right; }

/* ---------- takeaways, method, warning ---------- */
.tkgrid { margin-top: 46px; display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tk { border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
      padding: 22px 24px; }
.tn { font-family: "JetBrains Mono", monospace; font-size: 10.5px;
      letter-spacing: .16em; color: #666E76; }
.tt { font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; margin-top: 11px; }
.tb { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-top: 9px;
      text-wrap: pretty; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 14px; margin-top: 10px; }
.mi { border-top: 1px solid #14181C; padding-top: 13px; }
.mk { font-size: 13px; font-weight: 700; }
.mv { font-size: 12.5px; color: #8B939B; line-height: 1.6; margin-top: 6px;
      text-wrap: pretty; }
.biaswarn { margin-top: 22px; border: 1px solid #3A2A2A; border-radius: 14px;
            background: rgba(255,107,107,.05); padding: 16px 20px;
            display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.bw-k { font-family: "JetBrains Mono", monospace; font-size: 10.5px;
        letter-spacing: .16em; color: #FF6B6B; padding-top: 2px; white-space: nowrap; }
.bw-v { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; flex: 1; min-width: 240px; }
.bw-v b { color: var(--ink); font-weight: 600; }
.btstamp { margin-top: 26px; font-family: "JetBrains Mono", monospace;
           font-size: 11px; letter-spacing: .1em; color: #4A5158; line-height: 1.9; }