/* Compass — Stress Tests and Scenarios pages (2026-10-06, js/48). Same column, padding and canvas as the
   Paycheck / Taxes / Net Worth pages; compact tops (the header already names the page); the stress tests open
   with their results — no run or collapse buttons. Colors are theme tokens only. */
@media (min-width:1001px){
  #stressView, #scenariosView { grid-column:2 !important; grid-row:2 !important; min-width:0 !important; margin:0 !important;
    padding:28px 34px 54px !important; background:var(--compass-canvas, var(--c-gray-99)) !important; border-radius:0 0 20px 0 !important; }
}
#stressView .hero, #scenariosView .hero { background:transparent !important; }
#stressView .hero::after, #scenariosView .hero::after { display:none !important; }
@layer compassNavTop {
  html body :is(#stressView, #scenariosView) .section-title h2 { font-size:19px !important; line-height:1.3 !important; display:flex; align-items:center; }
  html body :is(#stressView, #scenariosView) .section-title { margin-top:26px !important; margin-bottom:12px !important; padding-bottom:0 !important; border:0 !important; }
  html body :is(#stressView, #scenariosView) .section-title .section-icon-wrap { display:none !important; }
  html body #stressView .hero.pg-hero { margin-bottom:0 !important; }
  html body #stressView #section05Title { margin-top:10px !important; }
  /* Opened with results: the buttons that ran or folded them away aren't needed. */
  html body #stressView .runbtn, html body #stressView .yb-collapse, html body #histStaleBanner, html body #seqRiskStaleBanner { display:none !important; }
  html body #stressView #historicalBacktestPanel, html body #stressView #historicalBacktestPanel + * { margin-top:0 !important; }
  html body #stressView .panel { padding-top:18px !important; }
  html body #stressView #histResults, html body #stressView #seqRiskContent { margin-top:0 !important; }
  html body #stressView:not(.is-empty) #stressEmpty, html body #stressView.is-empty > :not(.hero):not(#stressEmpty) { display:none !important; }
  html body #stressView .pg-wait { margin:10px 0 0; font-size:13px; color:var(--muted); }
  @media (max-width:700px){
    html body :is(#stressView, #scenariosView) .section-title { margin-top:18px !important; }
  }
}

/* Stress Tests, compact cards (2026-10-11, the user: "make the cards smaller so the chart is in view when the page
   loads"). Three short summary cards, the four bad-start cards in one row on a wide screen (two on smaller), so the
   savings chart starts on the first screen. In the studio layer to outrank the themes' !important card rules. */
@layer studio {
  html body #stressView #histSummaryCards { gap:12px !important; margin:0 0 12px !important; }
  html body #stressView #histSummaryCards .result-card { min-width:0 !important; min-height:0 !important; padding:12px 16px !important; border-radius:12px !important; }
  html body #stressView #histSummaryCards .result-card::after { top:12px; right:12px; width:26px; height:26px; border-radius:8px; font-size:14px; }
  html body #stressView #histSummaryCards .l { font-size:13px !important; line-height:1.3 !important; }
  html body #stressView #histSummaryCards .v { margin-top:6px !important; font-size:26px !important; line-height:1.1 !important; }
  html body #stressView #histSummaryCards .s { margin-top:2px !important; font-size:13px !important; line-height:1.35 !important; }
  html body #stressView #histBearCards { gap:10px !important; margin:0 0 14px !important; }
  html body #stressView .hist-bear { display:flex !important; flex-direction:column; justify-content:flex-start; align-items:stretch; padding:12px 14px !important; border-radius:12px !important; }
  html body #stressView .hist-bear .l { font-size:12.5px !important; line-height:1.3 !important; }
  html body #stressView .hist-bear-t { margin:3px 0 6px !important; font-size:12px !important; line-height:1.4 !important; }
  html body #stressView .hist-bear .v { margin-top:0 !important; font-size:20px !important; line-height:1.2 !important; }
  html body #stressView .hist-bear-s { margin-top:3px !important; font-size:11.5px !important; line-height:1.35 !important; }
  @media (min-width:1200px){
    html body #stressView #histBearCards { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
  }
  @media (max-width:700px){
    html body #stressView #histSummaryCards { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:8px !important; }
    html body #stressView #histSummaryCards .result-card { padding:10px !important; }
    html body #stressView #histSummaryCards .result-card::after { display:none !important; }
    html body #stressView #histSummaryCards .l { max-width:none !important; font-size:11.5px !important; white-space:normal !important; overflow-wrap:anywhere; }
    html body #stressView #histSummaryCards .v { font-size:20px !important; }
    html body #stressView #histSummaryCards .s { font-size:11.5px !important; }
    html body #stressView #histBearCards { gap:8px !important; }
    html body #stressView .hist-bear { padding:10px 11px !important; }
    html body #stressView .hist-bear .v { font-size:16px !important; }
    html body #stressView .hist-bear-more { display:none; } /* the event's name only ("Stagflation") */
  }
}