/* Home-page "How would this portfolio have held up in a crash?" panel (js/crash-replay.js).
   Built on the Track Record panel's styles in css/style.css (.backtest-panel, -stats, -toggle,
   -chart-wrap, -legend, -footnote); this file only adds what is specific to the replay. */

#crash-replay{ padding-top:0; }
.rp-panel .backtest-head{ max-width:780px; }
.rp-panel .backtest-head p{ min-height:3.2em; }

.rp-toggle{ flex-wrap:wrap; border-radius:22px; }
.rp-toggle .backtest-toggle-btn small{ margin-left:5px; font-size:11px; font-weight:500; opacity:.65; }

.rp-stats{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:30px; }
.rp-stats .backtest-stat{ padding:18px 18px 16px; }
.rp-stats .backtest-stat-val{ font-size:clamp(26px, 3vw, 36px); font-variant-numeric: tabular-nums; }

/* the chart: y labels live inside the plot, the date axis sits under it */
.rp-chart-wrap{ margin-bottom:14px; }
.rp-plot{ position:relative; }
.rp-ylabels{ position:absolute; inset:0; pointer-events:none; }
.rp-ylbl{ position:absolute; left:2px; transform:translateY(-120%); font-size:11px; line-height:1; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
.rp-ylbl--base{ color: rgba(255,255,255,0.72); }
.rp-xaxis{ position:relative; height:22px; margin-top:8px; }
.rp-xlbl{ position:absolute; top:0; font-size:11px; color: rgba(255,255,255,0.55); white-space:nowrap; transform:translateX(-50%); }
.rp-xlbl--start{ transform:none; }
.rp-xlbl--end{ transform:translateX(-100%); }

.rp-legend{ flex-wrap:wrap; gap:8px 24px; margin-bottom:26px; }
.rp-legend-zone{ display:inline-block; width:14px; height:9px; margin-right:7px; vertical-align:middle; border-radius:2px; background: rgba(255,255,255,0.12); }

.rp-picks-title{ position:relative; z-index:1; margin:0 0 6px; font-family:'Instrument Sans', sans-serif; font-size:19px; font-weight:600; color:#fff; }
.rp-picks-title small{ margin-left:8px; font-family:'Instrument Sans', sans-serif; font-size:12px; font-weight:500; color: rgba(255,255,255,0.5); }
.rp-picks{ position:relative; z-index:1; margin-bottom:26px; border-top:1px solid rgba(255,255,255,0.1); }
.rp-pick{ display:grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:center; padding:11px 2px; border-bottom:1px solid rgba(255,255,255,0.07); font-size:13px; }
.rp-pick--head{ padding:12px 2px 9px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.42); }
.rp-pick-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rp-pick-id b{ font-size:14px; color:#fff; }
.rp-pick-id small{ font-size:11.5px; color: rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-pick-cell{ display:flex; align-items:center; gap:12px; }
.rp-pick-cell b{ flex:none; min-width:52px; text-align:right; font-variant-numeric: tabular-nums; color:#fff; }
.rp-bar{ position:relative; flex:1; height:8px; border-radius:4px; background: rgba(255,255,255,0.07); }
.rp-bar::after{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background: rgba(255,255,255,0.35); }
.rp-bar-fill{ position:absolute; top:0; bottom:0; border-radius:4px; }
.rp-bar-fill--neg{ background:#FF8A75; }
.rp-bar-fill--pos{ background: var(--pos-strong); }
.rp-pick--off{ opacity:.6; }
.rp-pick-na{ font-size:12.5px; color: rgba(255,255,255,0.6); }

.rp-note strong{ color: rgba(255,255,255,0.7); }
.rp-note a{ color: rgba(255,255,255,0.7); text-decoration:underline; }

@media (max-width: 900px){
  .rp-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .rp-toggle{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); width:100%; }
  .rp-toggle .backtest-toggle-btn{ padding:9px 10px; line-height:1.25; }
  .rp-toggle .backtest-toggle-btn small{ display:block; margin:1px 0 0; white-space:nowrap; }
  .rp-stats .backtest-stat{ padding:14px; }
  .rp-pick{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap:8px; }
  .rp-pick--head{ display:none; }
  .rp-pick-id{ grid-column:1 / -1; flex-direction:row; align-items:baseline; gap:8px; }
  .rp-pick-cell{ flex-wrap:wrap; gap:4px 8px; }
  .rp-xdate{ display:none; }
  .rp-pick-cell b{ min-width:44px; }
  .rp-pick-cell::before{ content:attr(data-lbl); flex:0 0 100%; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
  .rp-xlbl{ font-size:11px; }
  #replayChart{ height:230px; }                /* the strokes are non-scaling, so stretching the plot taller is safe */
}