/* Stress Tests, 2026-10-16 redesign (js/10 renderHistoricalResults / histChart; design _audits/2026-10-16-stress-mockup.html):
   the answer first (how many lasted, the hardest start, three numbers, history against the forecast), the first 20 years
   as a band, a bar per year you could have retired hanging as deep as savings fell, the big crises deepest first, then
   the order-of-years test with its sentence above the chart. Theme tokens only. */
#stressView .sx-answer, #stressView .sx-card { background:var(--s-card, var(--c-gray-99)); border:1px solid var(--s-line, var(--c-gray-90)); border-radius:16px; padding:22px 24px; }
#stressView .sx-answer { margin:0 0 6px; }
#stressView .sx-big { margin:0 0 6px; font-size:34px; font-weight:700; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; color:var(--s-ink, var(--c-slate-15)); }
#stressView .sx-big.is-good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))); } #stressView .sx-big.is-mid { color:var(--s-amber, var(--c-amber-40)); } #stressView .sx-big.is-bad { color:var(--s-red, var(--c-red-50)); }
.sx-two { display:flex; flex-wrap:wrap; gap:12px 40px; margin:18px 0 0; }
.sx-two .v { display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--s-ink, var(--c-slate-15)); font-variant-numeric:tabular-nums; }
.sx-two .s { display:block; font-size:14px; color:var(--s-ink2, var(--c-slate-35)); }
#stressView .sx-lede { margin:0; max-width:60ch; font-size:18px; line-height:1.45; color:var(--s-ink2, var(--c-slate-35)); }
#stressView .sx-lede b { font-weight:700; color:var(--s-ink, var(--c-slate-15)); }
#stressView .sx-caveat { margin:16px 0 0; padding:12px 16px; border-left:3px solid var(--s-amber, var(--c-amber-55)); background:var(--s-amber-l, var(--c-amber-95)); border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
#stressView .sx-caveat b { color:var(--s-ink, var(--c-slate-15)); }
.sx-link { padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
.sx-link:hover { text-decoration:underline; } .sx-link:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
#stressView h3.sx-h { margin:30px 0 12px; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-15)); }
#stressView h3.sx-h small { margin-left:8px; font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--s-muted, var(--c-slate-55)); }
#stressView .sx-say { margin:0 0 10px; max-width:74ch; font-size:15px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
#stressView .sx-say b { color:var(--s-ink, var(--c-slate-15)); }
.sx-svg { display:block; width:100%; height:auto; overflow:visible; } .sx-svg text { font-family:inherit; }
.sx-grid { stroke:var(--s-line, var(--c-gray-90)); } .sx-ref { stroke:var(--s-muted, var(--c-slate-55)); stroke-dasharray:4 3; } .sx-ref0 { stroke:var(--s-muted, var(--c-slate-55)); }
.sx-yl, .sx-xl { font-size:12px; fill:var(--s-muted, var(--c-slate-55)); } .sx-yl { text-anchor:end; } .sx-xl { text-anchor:middle; } .sx-yl.sx-start { text-anchor:start; }
.sx-band { fill:var(--s-blue-l, var(--c-teal-95)); } .sx-mid { fill:none; stroke:var(--s-muted, var(--c-slate-55)); stroke-width:1.5; }
.sx-pick { fill:none; stroke:var(--s-red, var(--c-red-50)); stroke-width:2.5; stroke-linejoin:round; } .sx-pickdot { fill:var(--s-red, var(--c-red-50)); }
.sx-picklab { font-size:12.5px; font-weight:600; fill:var(--s-red, var(--c-red-50)); }
.sx-bar { cursor:pointer; outline:none; } .sx-hit { fill:transparent; }
.sx-bar .sx-col { fill:color-mix(in srgb, var(--s-red, var(--c-red-50)) 38%, var(--s-card, var(--c-gray-99))); }
.sx-bar.is-deep .sx-col, .sx-bar.is-fail .sx-col { fill:var(--s-red, var(--c-red-50)); }
.sx-bar.is-part .sx-col { fill:var(--s-line2, var(--c-gray-90)); }
.sx-bar.is-on .sx-col { stroke:var(--s-ink, var(--c-slate-15)); stroke-width:1.5; }
.sx-bar:focus-visible .sx-col { outline:none; stroke:var(--s-blue, var(--c-teal-50)); stroke-width:2; }
.sx-key { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 0; font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.sx-key i { display:inline-block; width:12px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.sx-k-band { background:var(--s-blue-l, var(--c-teal-95)); } .sx-key i.sx-k-mid { height:2px; vertical-align:3px; background:var(--s-muted, var(--c-slate-55)); }
.sx-key i.sx-k-pick { height:3px; vertical-align:3px; background:var(--s-red, var(--c-red-50)); }
.sx-k-deep, .sx-k-fail { background:var(--s-red, var(--c-red-50)); } .sx-k-mild { background:color-mix(in srgb, var(--s-red, var(--c-red-50)) 38%, var(--s-card, var(--c-gray-99))); } .sx-k-part { background:var(--s-line2, var(--c-gray-90)); }
#stressView .sx-detail { margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--s-soft, var(--c-gray-95)); font-size:14.5px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
#stressView .sx-detail strong { color:var(--s-ink, var(--c-slate-15)); } .sx-bad { color:var(--s-red, var(--c-red-50)); font-weight:600; }
#stressView .sx-dips .hc-table { margin:12px 0 0; }
.sx-crises { margin:0; padding:0; list-style:none; }
.sx-crises li + li { border-top:1px solid var(--s-line, var(--c-gray-90)); }
.sx-crisis { display:grid; grid-template-columns:170px minmax(0, 1fr) 260px; gap:6px 18px; align-items:center; width:100%; padding:12px 0; border:0; background:none; font:inherit; font-size:14.5px; font-weight:400; text-align:left; color:inherit; cursor:pointer; }
.sx-crisis:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; border-radius:6px; }
.sx-crisis .y b { display:block; font-size:16px; font-weight:700; color:var(--s-ink, var(--c-slate-15)); } .sx-crisis .t small { display:block; font-size:12.5px; color:var(--s-muted, var(--c-slate-55)); }
.sx-crisis .y span, .sx-crisis .t { font-size:13.5px; color:var(--s-ink2, var(--c-slate-35)); }
.sx-crisis:hover .y b { color:var(--s-link, var(--c-teal-45)); }
.sx-crisis .m { display:block; } .sx-crisis .m small { display:block; margin-top:4px; font-size:12.5px; color:var(--s-muted, var(--c-slate-55)); }
.sx-meter { display:block; position:relative; height:12px; border-radius:6px; background:var(--s-soft, var(--c-gray-95)); }
.sx-meter i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--s-blue, var(--c-teal-50)); } .sx-meter.is-bad i { background:var(--s-red, var(--c-red-50)); }
.sx-meter em { position:absolute; top:-3px; bottom:-3px; left:calc(100% - 2px); width:2px; background:var(--s-muted, var(--c-slate-55)); }
#stressView .sx-seqsum { margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--s-ink2, var(--c-slate-35)); }
@media (max-width:760px){
  #stressView .sx-answer, #stressView .sx-card, html body #stressView #seqRiskContent { padding:16px !important; }
  #stressView .sx-big { font-size:27px; } #stressView .sx-lede { font-size:17px; } .sx-two { gap:12px 24px; }
  .sx-crisis { grid-template-columns:1fr; }
  #stressView h3.sx-h small { display:block; margin:2px 0 0; }
}
/* The old tinted summary box and the app's layered card rules: @layer studio is declared first, so its !important wins. */
@layer studio {
  html body #stressView #histSummaryCards, html body #stressView #histBearCards { display:block !important; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; }
  html body #stressView .sx-crisis { font-weight:400 !important; } /* the app's button rule sets 650 !important */
  html body #stressView .panel { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
  html body #stressView .panel::before, html body #stressView .panel::after { display:none !important; }
  html body #stressView #seqRiskContent { background:var(--s-card, var(--c-gray-99)) !important; border:1px solid var(--s-line, var(--c-gray-90)) !important; border-radius:16px !important; padding:22px 24px !important; }
  html body #stressView #seqRiskSummary.sx-seqsum { padding:0 !important; background:none !important; border:0 !important; }
}
.sx-yl.sx-end { paint-order:stroke; stroke:var(--s-card, var(--c-gray-99)); stroke-width:4px; stroke-linejoin:round; }
/* If prices rise fast (2026-10-17, js/77-inflation-test.js) */
#stressView .it-card { margin:0; }
.it-opts { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.it-opt { min-height:40px; padding:8px 14px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14.5px; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.it-opt:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
#stressView .it-lede { margin:0; max-width:70ch; font-size:17px; line-height:1.5; color:var(--s-ink, var(--c-slate-15)); }
.it-wait { margin:0; font-size:14.5px; color:var(--s-muted, var(--c-slate-55)); }
.it-table { width:100%; border-collapse:collapse; margin:12px 0 0; font-variant-numeric:tabular-nums; }
.it-table th, .it-table td { padding:9px 10px; text-align:right; border-bottom:1px solid var(--s-line, var(--c-gray-90)); font-size:15px; white-space:normal; }
.it-table th:first-child, .it-table td:first-child { text-align:left; }
.it-table thead th { font-size:13px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); text-transform:none; letter-spacing:normal; }
.it-table td:last-child { font-weight:700; }
.it-good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))) !important; } .it-bad { color:var(--s-red, var(--c-red-50)) !important; }
#stressView .it-how { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--s-muted, var(--c-slate-55)); }
@media (max-width:760px){
  .it-table thead { display:none; }
  .it-table tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  .it-table tbody td { padding:0; border:0 !important; text-align:left; font-size:14.5px; }
  .it-table tbody td:first-child { grid-column:1 / -1; padding:0 0 4px; font-weight:600; }
  .it-table tbody td[data-h]::before { content:attr(data-h); display:block; font-size:11.5px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); }
}
@layer studio {
  html body .it-table thead th, html body .it-table tbody td { background:transparent !important; border-color:var(--s-line, var(--c-gray-90)) !important; }
  html body .it-table thead th { color:var(--s-muted, var(--c-slate-55)) !important; }
  html body .it-opt { font-weight:500 !important; }
  html body .it-opt[aria-pressed="true"] * { color:inherit !important; }
  html body .it-opt[aria-pressed="true"] { border-color:var(--s-blue, var(--c-teal-50)) !important; background:var(--s-blue-l, var(--c-teal-95)) !important; color:var(--s-ink, var(--c-slate-15)) !important; }
  html body #stressView #inflTestPanel { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
}