/* Drawdown-only geometry and episode interaction. Shared chrome lives in backtest.css. */
.mdd-input-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0; }
.mdd-scenario-grid { max-width: 600px; grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.mdd-page meter { accent-color: var(--modern-positive); }
.mdd-loading-slot { min-height: 1.6em; }
.mdd-loading-slot p { margin: 0; }
.mdd-chart { position: relative; height: 330px; min-width: 0; margin: 16px 0; }
.mdd-price-chart { height: 220px; }
.mdd-episode-select { min-width: 44px; }
.mdd-episode-select[aria-pressed=true] { background: var(--investment-accent); color: var(--modern-surface); }
.mdd-page output { display: block; min-height: 2em; font-variant-numeric: tabular-nums; }
.mdd-table-wrap { -webkit-overflow-scrolling: touch; }
.mdd-table-wrap :is(th,td) { text-align: right; white-space: nowrap; }
.mdd-table-wrap th:first-child { text-align: left; }
.mdd-duration-unit { display: block; }
.mdd-page meter { display: block; width: 100%; min-width: 100px; height: 12px; }
.mdd-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.mdd-related { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width:820px) {
  .mdd-input-grid, .mdd-stats { grid-template-columns: minmax(0,1fr); }
  .mdd-scenario-grid { grid-template-columns: minmax(0,1fr); }
  .mdd-chart { height: 280px; }
  .mdd-price-chart { height: 220px; }
  .mdd-related { flex-direction: column; }
}