/* Loaded last: compact layout belongs only to the Options vs Futures page. */
.replay-page .chart-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}

.replay-page .analysis-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  min-width: 0;
}

.replay-page .replay-info,
.replay-page .chart-window-controls,
.replay-page .inspection-details,
.replay-page .pnl-notes {
  position: relative;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.replay-page .replay-info > summary,
.replay-page .chart-window-controls > summary,
.replay-page .inspection-details > summary,
.replay-page .pnl-notes > summary,
.replay-page .perp-advanced > summary {
  min-height: 32px;
  padding: 6px 0;
  cursor: pointer;
  color: #b6cbc7;
  font-size: 12px;
  line-height: 1.5;
}

.replay-page summary:focus-visible,
.replay-page button:focus-visible,
.replay-page a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.replay-page .replay-info-body {
  padding: 12px;
  border: 1px solid #394c4f;
  border-radius: 6px;
  background: #172326;
  color: #b0c3c4;
  line-height: 1.7;
}

.replay-page .replay-info-body p { margin: 5px 0; }
.replay-page .replay-info .replay-notice { margin: 8px 0 0; }
.replay-page .chart-window-controls { padding: 0 12px; }
.replay-page .chart-window-body { padding: 4px 0 12px; }
.replay-page .pnl-notes { border-top: 1px solid var(--line); }
.replay-page .pnl-notes .result-notes { border: 0; }
.replay-page .inspection-details { padding: 0 12px; }
.replay-page .inspection-content { min-width: 0; }
.replay-page .perp-advanced { margin-top: 9px; }
.replay-page .perp-advanced .field-grid { margin-top: 8px; }

.replay-page #position-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  max-height: 90dvh;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #425a5f;
  border-radius: 12px;
}

.replay-page #position-dialog .dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.replay-page #position-dialog .dialog-heading button,
.replay-page #close-position-dialog {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #3e5459;
  border-radius: 6px;
  background: #202e32;
  color: #dbe9e3;
  font: inherit;
  cursor: pointer;
}

.replay-page #position-dialog .results-section { margin-top: 0; }
.replay-page #position-dialog .result-cards { align-items: start; }
.replay-page #position-dialog .result-card { min-width: 0; }
.replay-page #position-dialog .result-pnl { overflow-wrap: anywhere; }
.replay-page #position-dialog .result-details > div,
.replay-page #position-dialog .result-details strong,
.replay-page #position-dialog .terminal-value,
.replay-page #position-dialog .result-period { font-size: 12px; }

/* The bounded workspace is opt-in by viewport size; zoom and smaller screens
   retain document scrolling and the full-size interaction targets below. */
@media (min-width: 1180px) and (min-height: 700px) {
  body.replay-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .replay-page .terminal-header {
    flex: 0 0 56px;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    gap: 18px;
  }

  .replay-page .terminal-brand img { width: 116px; }
  .replay-page .terminal-divider { height: 20px; }
  .replay-page .terminal-nav { gap: 18px; min-width: 0; }
  .replay-page .terminal-nav a { min-height: 44px; font-size: 12px; }
  .replay-page .terminal-header-end { gap: 14px; }
  .replay-page .terminal-launch { padding: 8px 10px; gap: 10px; }
  .replay-page .language-control select { min-height: 30px; padding: 4px 7px; }

  .replay-page .page {
    display: flex;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
  }

  .replay-page .page > main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 5px;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px 14px 8px;
  }

  .replay-page main > :not(.replay-workspace) { flex-shrink: 0; }
  .replay-page .comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
  .replay-page .comparison-heading h1 { font-size: 22px; line-height: 1.25; }
  .replay-page .market-strip { flex-wrap: nowrap; min-height: 49px; margin: 0; }
  .replay-page .asset-picker { min-width: 142px; padding: 7px 12px; }
  .replay-page .asset-picker select { min-height: 28px; font-size: 17px; }
  .replay-page .asset-picker > label,
  .replay-page .reference-label { font-size: 11px; }
  .replay-page .market-stat { min-width: 104px; padding: 6px 15px; gap: 2px; }
  .replay-page .market-stat > span { font-size: 11px; }
  .replay-page .market-stat > strong { font-size: 15px; }
  .replay-page .market-source { min-width: 0; padding: 4px 12px; gap: 3px; font-size: 11px; }
  .replay-page .market-source .terminal-status { font-size: 11px; }
  .replay-page #history-status { font-size: 11px; line-height: 1.4; }
  .replay-page .market-session-notice { padding: 5px 10px; margin: 0; font-size: 11px; }
  .replay-page #replay-market-notice:empty { display: none; }

  .replay-page .replay-info { align-self: flex-start; z-index: 70; }
  .replay-page .replay-info > summary { min-height: 24px; padding: 2px 0; font-size: 11px; }
  .replay-page .replay-info-body {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: min(760px, calc(100vw - 40px));
    max-height: 50dvh;
    overflow: auto;
    box-shadow: 0 12px 36px #0008;
  }

  .replay-page .comparison-dock { position: relative; top: auto; z-index: 1; margin: 0; box-shadow: none; }
  .replay-page .comparison-dock-heading { padding: 4px 12px 0; align-items: center; font-size: 11px; line-height: 1.4; }
  .replay-page .comparison-dock-heading a,
  .replay-page .comparison-dock-heading button { min-height: 28px; font-size: 11px; }
  .replay-page .quick-results { padding: 1px 0 7px; }
  .replay-page .quick-result { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 12px; align-items: baseline; }
  .replay-page .quick-result > span { grid-column: auto; min-width: 0; font-size: 11px; }
  .replay-page .quick-result strong { font-size: 21px; text-align: right; }
  .replay-page .quick-result small,
  .replay-page .quick-result b { font-size: 11px; }

  .replay-page .replay-workspace {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 456px;
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    min-width: 0;
    align-items: stretch;
  }

  .replay-page .chart-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    contain: size;
  }

  .replay-page .chart-panel,
  .replay-page .pnl-panel { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .replay-page .chart-panel { z-index: 3; }
  .replay-page .chart-tools { flex: 0 0 auto; min-height: 35px; padding: 3px 10px; gap: 9px; flex-wrap: nowrap; }
  .replay-page .chart-tools .segments { padding: 2px; }
  .replay-page .chart-tools button { min-height: 28px; font-size: 11px; padding: 3px 7px; }
  .replay-page .chart-tab { font-size: 11px; }
  .replay-page .drag-hint { font-size: 11px; }
  .replay-page .chart-tools .text-button { margin-left: auto; padding: 3px 0; }
  .replay-page .chart-window-controls { flex: 0 0 auto; margin-left: auto; padding: 0; border: 0; background: transparent; z-index: 40; }
  .replay-page .chart-window-controls > summary { min-height: 24px; padding: 2px 0; font-size: 11px; }
  .replay-page .chart-window-body {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(520px, calc(100vw - 40px));
    max-height: 48dvh;
    overflow: auto;
    padding: 12px;
    border: 1px solid #45605f;
    border-radius: 6px;
    background: #18272b;
    box-shadow: 0 12px 32px #0009;
  }

  .replay-page .chart-panel .price-chart-shell {
    position: relative;
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    width: auto;
    margin: 0 4px;
    overflow: hidden;
  }

  .replay-page #price-chart,
  .replay-page #pnl-chart { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
  .replay-page .chart-attribution { flex: 0 0 auto; padding: 2px 10px; font-size: 11px; line-height: 1.4; }
  .replay-page .range-strip { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; padding: 4px 10px; }
  .replay-page .range-strip label { display: flex; align-items: center; gap: 6px; font-size: 11px; min-width: 0; }
  .replay-page .range-strip select { min-height: 28px; font-size: 11px; padding: 3px 4px; }
  .replay-page .range-arrow { padding-top: 0; }
  .replay-page .range-summary { gap: 0; margin-left: 0; }
  .replay-page .range-summary strong,
  .replay-page .range-summary span { font-size: 11px; line-height: 1.4; }
  .replay-page .range-presets { display: none; }
  .replay-page .range-presets button { min-height: 28px; padding: 3px 7px; font-size: 11px; }

  .replay-page .analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 28px; gap: 4px; min-height: 0; }
  .replay-page .pnl-panel { padding: 5px 10px 0; margin: 0; }
  .replay-page .pnl-panel .section-heading { flex: 0 0 auto; margin: 0 0 4px; gap: 8px; }
  .replay-page .pnl-panel .section-heading h2 { font-size: 13px; margin: 0; }
  .replay-page .pnl-panel .section-heading p { display: none; }
  .replay-page .pnl-legend { font-size: 11px; gap: 12px; }
  .replay-page .pnl-chart-shell { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .replay-page .pnl-notes { flex: 0 0 auto; z-index: 35; }
  .replay-page .pnl-notes > summary { min-height: 24px; padding: 2px 0; font-size: 11px; }
  .replay-page .pnl-notes #result-notes {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 40dvh;
    margin: 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid #45605f;
    border-radius: 6px;
    background: #18272b;
    font-size: 12px;
    box-shadow: 0 12px 32px #0008;
  }

  .replay-page .inspection-column { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 0; overflow: visible; border: 0; background: transparent; }
  .replay-page .inspection-details { position: relative; flex: 0 0 auto; padding: 0; }
  .replay-page .inspection-details > summary { min-height: 28px; padding: 3px 0; font-size: 11px; }
  .replay-page .inspection-content {
    position: absolute;
    z-index: 50;
    bottom: calc(100% + 5px);
    left: 0;
    width: min(680px, 100%);
    max-height: 50dvh;
    overflow: auto;
    border: 1px solid #45605f;
    border-radius: 7px;
    background: #18272b;
    box-shadow: 0 12px 36px #0009;
  }

  .replay-page .inspection-panel { padding: 14px; }
  .replay-page .inspection-content .inspection-column { display: block; }
  .replay-page .inspection-content .event-toolbar { padding: 6px 14px 0; }
  .replay-page .inspection-content .chart-events { flex-wrap: wrap; max-height: none; padding: 8px 14px 14px; }
  .replay-page .event-toolbar { flex: 0 0 auto; padding: 0; border: 0; gap: 8px; font-size: 11px; }
  .replay-page .event-toolbar label { font-size: 11px; }
  .replay-page .chart-events { flex: 1 1 0; flex-wrap: nowrap; min-width: 0; max-height: 32px; padding: 1px 0; overflow: auto; }
  .replay-page .chart-event { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; min-height: 28px; padding: 3px 8px 3px 11px; }
  .replay-page .chart-event strong,
  .replay-page .chart-event span,
  .replay-page .events-empty { font-size: 11px; }
  .replay-page .events-empty { padding: 3px 0; }

  .replay-page .assumptions-panel {
    display: block;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #526c6c transparent;
    scrollbar-gutter: stable;
    padding: 10px 12px;
  }

  .replay-page .assumptions-heading { margin-bottom: 2px; }
  .replay-page .assumptions-heading h2 { font-size: 13px; }
  .replay-page .assumptions-heading button { min-height: 28px; padding: 3px 0; font-size: 11px; }
  .replay-page #scenario-state { font-size: 11px; line-height: 1.4; margin: 2px 0 4px; }
  .replay-page .outlook-picker { margin: 7px 0; }
  .replay-page .outlook-picker legend { margin-bottom: 4px; font-size: 11px; }
  .replay-page .scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .replay-page .scenario-grid button { min-height: 48px; padding: 5px 6px; gap: 2px; }
  .replay-page .scenario-grid strong,
  .replay-page .scenario-grid small { font-size: 11px; line-height: 1.4; }
  .replay-page .outlook-picker > p { margin-top: 4px; font-size: 11px; line-height: 1.4; }
  .replay-page .budget-block { grid-template-columns: minmax(0, 1fr) 140px; gap: 0 8px; }
  .replay-page .budget-block .field-label { font-size: 11px; }
  .replay-page .budget-block .capital-field { min-height: 32px; margin-top: 3px; padding: 1px 8px; font-size: 19px; }
  .replay-page .budget-block .capital-field input { min-height: 28px; font-size: 19px; }
  .replay-page .budget-block .budget-presets { margin-top: 3px; }
  .replay-page .budget-presets button { min-height: 28px; padding: 3px 6px; font-size: 11px; }
  .replay-page .position-settings { gap: 12px; margin-top: 9px; padding-top: 9px; }
  .replay-page .position-heading { min-height: 22px; gap: 4px; margin-bottom: 6px; }
  .replay-page .position-heading h3 { font-size: 12px; }
  .replay-page .position-heading .position-model { font-size: 11px; }
  .replay-page .control-label { font-size: 11px; gap: 4px; }
  .replay-page .derived-strategy,
  .replay-page .position-direction { min-height: 28px; padding: 4px 7px; font-size: 12px; }
  .replay-page .position-direction > span:last-child { font-size: 11px; }
  .replay-page .premium-panel { margin-top: 7px; }
  .replay-page .premium-summary { padding: 6px 8px; }
  .replay-page .premium-summary-title { margin-bottom: 4px; font-size: 11px; }
  .replay-page .premium-compact { flex-wrap: nowrap; gap: 6px; }
  .replay-page .premium-compact > span { gap: 2px; }
  .replay-page .premium-compact > span > span { font-size: 11px; }
  .replay-page .premium-compact strong { font-size: 16px; line-height: 1.2; }
  .replay-page .premium-disclosure-hint { margin-top: 3px; font-size: 11px; line-height: 1.4; }
  .replay-page .premium-body { padding: 9px; }
  .replay-page .field-grid { gap: 7px; margin-top: 8px; }
  .replay-page .field-grid:has(.adjust-control) { row-gap: 8px; }
  .replay-page .field-grid label,
  .replay-page .adjust-heading label { font-size: 11px; gap: 4px; }
  .replay-page .adjust-heading { gap: 6px; }
  .replay-page .input-unit { min-height: 28px; padding: 0 6px; }
  .replay-page .adjust-heading .input-unit { width: 80px; padding: 0 6px; }
  .replay-page #assumptions input[type="number"] { min-height: 28px; font-size: 13px; }
  .replay-page .input-unit span { font-size: 11px; }
  .replay-page .adjust-slider { height: 28px; min-height: 28px; }
  .replay-page .adjust-limits { font-size: 11px; line-height: 1.3; margin-top: -2px; }
  .replay-page .adjust-presets { gap: 3px; margin-top: 3px; }
  .replay-page .adjust-presets button { min-height: 28px; padding: 2px; font-size: 11px; }
  .replay-page .hv-summary { margin-top: 3px; font-size: 11px; line-height: 1.4; }
  .replay-page .hv-summary span,
  .replay-page .hv-summary strong { font-size: 11px; }
  .replay-page .hv-details > summary,
  .replay-page .option-extra > summary,
  .replay-page .perp-advanced > summary,
  .replay-page .advanced > summary { min-height: 28px; padding: 4px 0; font-size: 11px; }
  .replay-page .option-extra,
  .replay-page .hv-details,
  .replay-page .perp-advanced { margin-top: 4px; }
  .replay-page .perp-margin-panel { gap: 3px; margin: 7px 0; padding: 7px 8px; font-size: 11px; }
  .replay-page .perp-margin-panel output { font-size: 17px; }
  .replay-page .perp-margin-panel small { font-size: 11px; line-height: 1.4; }
  .replay-page .position-risk { padding: 8px; margin-top: 8px; }
  .replay-page .position-risk strong,
  .replay-page .position-risk p,
  .replay-page .field-help { font-size: 11px; }
  .replay-page .advanced { margin-top: 7px; padding-top: 4px; }
  .replay-page .scenario-summary { margin-top: 6px; padding-top: 6px; gap: 5px 10px; font-size: 11px; }
  /* Exact inputs and sliders remain primary. Presets and repeated helper copy
     return in the regular layout; risk notices are never suppressed here. */
  .replay-page .assumptions-panel .adjust-limits,
  .replay-page .assumptions-panel .adjust-presets,
  .replay-page .assumptions-panel #scenario-state,
  .replay-page .assumptions-panel .outlook-picker > p,
  .replay-page .assumptions-panel .premium-disclosure-hint,
  .replay-page .assumptions-panel .scenario-summary,
  .replay-page .page-footer { display: none; }
}

@media (min-width: 1180px) and (min-height: 700px) and (max-height: 800px) {
  .replay-page .chart-column { grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (min-width: 1180px) and (max-width: 1439px) and (min-height: 700px) {
  .replay-page .terminal-header { gap: 12px; }
  .replay-page .terminal-nav { gap: 13px; }
  .replay-page .terminal-header-end { gap: 10px; }
  .replay-page .market-stat { min-width: 88px; padding-right: 11px; padding-left: 11px; }
  .replay-page .chart-tools { gap: 7px; }
  .replay-page .drag-hint { display: none; }
  .replay-page .quick-result { gap: 6px; }
  .replay-page .quick-result strong { font-size: 19px; }
  .replay-page .event-toolbar { gap: 6px; }
}

/* Smaller windows use the document flow, including every expanded disclosure. */
@media (max-width: 1179px), (max-height: 699px) {
  body.replay-page { height: auto; min-height: 100vh; overflow: auto; }
  .replay-page .page,
  .replay-page .page > main { height: auto; min-height: 0; }
  .replay-page .replay-workspace { grid-template-columns: minmax(0, 1fr); }
  .replay-page .chart-column { display: flex; flex-direction: column; contain: none; gap: 12px; }
  .replay-page .chart-column .price-chart-shell { flex: none; height: clamp(280px, 45vh, 440px); min-height: 280px; }
  .replay-page .analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .replay-page .pnl-chart-shell { height: 270px; }
  .replay-page #pnl-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
  .replay-page .assumptions-panel { display: block; max-height: none; overflow: visible; }
  .replay-page .inspection-column { overflow: visible; }
  .replay-page .inspection-content,
  .replay-page .chart-window-body,
  .replay-page .replay-info-body,
  .replay-page .pnl-notes #result-notes { position: static; max-height: none; }
  .replay-page .replay-info > summary,
  .replay-page .inspection-details > summary,
  .replay-page .chart-window-controls > summary,
  .replay-page .pnl-notes > summary,
  .replay-page .perp-advanced > summary { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .replay-page .terminal-nav { overflow-x: auto; }
  .replay-page .terminal-nav a { flex-shrink: 0; }
}

@media (max-width: 600px) {
  .replay-page #position-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding: 14px; }
  .replay-page #position-dialog .result-cards { grid-template-columns: minmax(0, 1fr); }
  .replay-page #position-dialog .section-heading { align-items: flex-start; flex-direction: column; }
  .replay-page #position-dialog .result-period { display: block; }
  .replay-page .chart-window-fields { flex-wrap: wrap; }
  .replay-page .chart-window-fields label { flex: 1 1 120px; }
  .replay-page .inspection-values { gap: 8px; }
  .replay-page .inspection-value > strong { white-space: normal; overflow-wrap: anywhere; }
}