/* Investment calculators only. Loaded by fragments::head before feature CSS. */

.investment-calculator .site-header { overflow: visible; }
.investment-calculator .calculator-menu:not([open]) .calculator-menu-panel { display: none; }
.investment-calculator .calculator-display-settings { display: none; }
.investment-calculator .backtest-kicker { margin: 0; color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 800; letter-spacing: .06em; line-height: 1.5; }
.investment-calculator .backtest-live-dot { padding-top: 3px; color: var(--modern-positive); font-size: 10px; font-weight: 750; white-space: nowrap; }
.investment-calculator .backtest-section { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--modern-border); }
.investment-calculator .backtest-section + .backtest-section { margin-top: 0; }
.investment-calculator .backtest-section legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; color: var(--modern-text); font-size: var(--investment-label-size); font-weight: 650; line-height: 1.5; }
.investment-calculator .backtest-section legend span { color: var(--modern-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.investment-calculator .backtest-plan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid var(--modern-border); border-radius: 8px; background: var(--modern-soft); width: calc((100% - 48px) / 2); max-width: none; margin-top: 12px; }
.investment-calculator .backtest-period-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 4px; border: 1px solid var(--modern-border); border-radius: 8px; background: var(--modern-soft); margin-bottom: 12px; }
.investment-calculator .backtest-plan-toggle button { min-height: var(--investment-action-height); border: 0; border-radius: 5px; background: transparent; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 700; cursor: pointer; }
.investment-calculator .backtest-period-shortcuts button { min-height: var(--investment-action-height); border: 0; border-radius: 5px; background: transparent; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 700; cursor: pointer; }
.investment-calculator .backtest-plan-toggle button.is-active { background: var(--modern-surface); color: var(--modern-text); box-shadow: 0 1px 3px rgba(23,23,23,.08); }
.investment-calculator .backtest-period-shortcuts button[aria-pressed="true"] { background: var(--modern-surface); color: var(--modern-text); box-shadow: 0 1px 3px rgba(23,23,23,.08); }
.investment-calculator .backtest-period-shortcuts button:hover { background: var(--modern-surface); color: var(--modern-text); box-shadow: 0 1px 3px rgba(23,23,23,.08); }
.investment-calculator .backtest-date-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap: 14px; }
.investment-calculator .backtest-date-grid label { min-width: 0; }
.investment-calculator .backtest-date-grid input { min-width: 0; }
.investment-calculator .backtest-advanced { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--modern-border); grid-column: 1 / -1; margin: 0; }
.investment-calculator .backtest-advanced-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--investment-action-height); padding: 10px 12px; border: 1px solid var(--modern-border-strong); border-radius: 6px; background: var(--modern-surface); color: var(--modern-text); text-align: left; font-size: var(--investment-label-size); font-weight: 650; cursor: pointer; transition: border-color .15s, background-color .15s; }
.investment-calculator .backtest-advanced-toggle:hover { border-color: var(--modern-text); background: var(--modern-soft); }
.investment-calculator .backtest-advanced-toggle[aria-expanded="true"] { border-color: var(--modern-text); background: var(--modern-soft); margin-bottom: 14px; }
.investment-calculator .backtest-advanced-label { flex: none; }
.investment-calculator .backtest-advanced-summary { min-width: 0; margin-left: auto; overflow: hidden; color: var(--modern-muted); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.investment-calculator .backtest-advanced-chevron { flex: 0 0 8px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.investment-calculator .backtest-advanced-toggle[aria-expanded="true"] .backtest-advanced-chevron { transform: rotate(225deg); }
.investment-calculator .backtest-inline-note { padding: 9px 11px; border-left: 2px solid var(--investment-warning); background: var(--modern-soft); }
.investment-calculator .backtest-advanced [data-dividend-error].is-visible { display: block; margin: -7px 0 14px; }
.investment-calculator .backtest-result { scroll-margin-top: 110px; }
.investment-calculator .backtest-result-actions { position: relative; display: flex; align-items: center; gap: 8px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.investment-calculator .backtest-result-currency { padding: 0; border: 0; border-radius: 0; color: var(--modern-muted); font-size: 14px; font-weight: 750; }
.investment-calculator .backtest-result-actions .modern-calculation-share { align-items: flex-end; }
.investment-calculator .backtest-result-actions .modern-share-status { position: absolute; max-width: 180px; margin-top: 48px; font-size: 12px; }
.investment-calculator .backtest-actual-periods { display: grid; gap: 5px; }
.investment-calculator .backtest-actual-periods span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.investment-calculator .backtest-actual-periods b { flex: 1 1 140px; overflow-wrap: anywhere; }
.investment-calculator .backtest-comparison-table-wrap { margin-bottom: 36px; overflow: hidden; border: 0; border-radius: 0; }
.investment-calculator .backtest-comparison-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.investment-calculator .backtest-comparison-table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.investment-calculator .backtest-comparison-table th { min-width: 0; overflow-wrap: anywhere; text-align: right; vertical-align: middle; }
.investment-calculator .backtest-comparison-table td { min-width: 0; overflow-wrap: normal; text-align: right; vertical-align: middle; white-space: nowrap; }
.investment-calculator .backtest-comparison-table th:first-child { width: 27%; text-align: left; }
.investment-calculator .backtest-comparison-table thead th span { display: block; }
.investment-calculator .backtest-comparison-table thead th small { display: block; margin-top: 2px; font-size: var(--investment-caption-size); }
.investment-calculator .backtest-comparison-table tbody td { font-size: 16px; font-weight: 800; }
.investment-calculator .backtest-difference-label { display: block; margin-bottom: 3px; color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 600; line-height: 1.3; }
.investment-calculator .backtest-difference-label + strong { font-size: inherit; }
.investment-calculator .backtest-chart-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 18px; }
.investment-calculator .backtest-chart-heading > div { min-width: 0; }
.investment-calculator .backtest-chart-legend { min-width: 0; width: 100%; max-width: 100%; justify-content: flex-start; color: var(--modern-muted); list-style: none; }
.investment-calculator .backtest-chart-legend li { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 6px; }
.investment-calculator .backtest-chart-legend li::before { width: 17px; height: 0; flex: 0 0 17px; border-top: 2px solid #426b58; content: ""; }
.investment-calculator .backtest-chart-legend b { min-width: 0; overflow: hidden; color: var(--modern-text); text-overflow: ellipsis; white-space: nowrap; }
.investment-calculator .backtest-chart-legend small { flex: 0 0 auto; font-size: var(--investment-caption-size); white-space: nowrap; }
.investment-calculator .backtest-chart-legend .is-benchmark::before { border-color: #92928c; border-top-style: dashed; }
.investment-calculator .backtest-performance-chart { min-width: 0; margin-top: 18px; }
.investment-calculator .backtest-chart-canvas { position: relative; display: block; width: 100%; height: 380px; overflow: hidden; border-radius: 5px; outline: none; touch-action: pan-y; }
.investment-calculator .backtest-chart-canvas:focus-visible { box-shadow: 0 0 0 3px rgba(66,107,88,.24); }
.investment-calculator .backtest-chart-tooltip { display: grid; min-width: 0; max-width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 10px 20px; min-height: 56px; margin-bottom: 8px; padding: 0; overflow: visible; border-radius: 6px; background: transparent; color: var(--modern-text); font-size: var(--investment-label-size); }
.investment-calculator .backtest-chart-tooltip time { color: var(--modern-muted); font-variant-numeric: tabular-nums; white-space: nowrap; grid-column: 1 / -1; }
.investment-calculator .backtest-chart-tooltip span { display: grid; min-width: 0; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 3px 6px; }
.investment-calculator .backtest-chart-tooltip i { width: 7px; height: 7px; grid-row: 1; border-radius: 50%; background: #426b58; grid-column: 1; }
.investment-calculator .backtest-chart-tooltip .is-benchmark i { background: #92928c; }
.investment-calculator .backtest-chart-tooltip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
.investment-calculator .backtest-chart-tooltip strong { font-size: 16px; font-variant-numeric: tabular-nums; white-space: normal; grid-column: 2; grid-row: 2; overflow: visible; overflow-wrap: anywhere; }
.investment-calculator .backtest-chart-tooltip em { grid-column: 2; color: var(--modern-muted); font-size: var(--investment-label-size); font-style: normal; font-variant-numeric: tabular-nums; grid-row: 3; }
.investment-calculator .backtest-chart-empty { text-align: center; }
.investment-calculator .backtest-chart-attribution { margin: 8px 0 0; text-align: left; }
.investment-calculator .backtest-chart-attribution a { color: inherit; text-underline-offset: 2px; }
.investment-calculator .backtest-risk-analysis { margin: 12px 0 24px; padding: 24px 0; border: 0; border-radius: 0; background: #fff; border-top: 1px solid var(--modern-border); }
.investment-calculator .backtest-risk-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.investment-calculator .backtest-risk-heading h3 small { color: var(--modern-muted); font-size: 10px; }
.investment-calculator .backtest-risk-heading .backtest-kicker { margin: 0; font-size: var(--investment-caption-size); letter-spacing: .06em; line-height: 1.5; }
.investment-calculator .backtest-risk-status { display: inline-flex; max-width: 100%; margin: 0; padding: 8px 12px; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; overflow-wrap: anywhere; color: var(--modern-muted); border: 1px solid currentColor; border-radius: 999px; font-size: var(--investment-label-size); font-weight: 800; line-height: 1.5; }
.investment-calculator .backtest-risk-status strong { font-size: var(--investment-value-size); font-variant-numeric: tabular-nums; }
.investment-calculator .backtest-risk-status em { font-style: normal; }
.investment-calculator .backtest-risk-summary { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 20px; }
.investment-calculator .backtest-risk-summary > div { min-width: 0; padding: 18px; border: 1px solid var(--modern-border); border-radius: 7px; background: var(--modern-soft); }
.investment-calculator .backtest-risk-summary span { display: block; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 500; line-height: 1.6; }
.investment-calculator .backtest-risk-summary strong { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: var(--investment-value-size); font-weight: 600; letter-spacing: -.02em; line-height: 1.5; }
.investment-calculator .backtest-risk-note { margin: 16px 0 0; color: var(--modern-muted); font-size: var(--investment-body-size); line-height: 1.7; }
.investment-calculator .backtest-risk-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.investment-calculator .backtest-risk-timeline li { position: relative; min-width: 0; padding: 16px 18px; border: 1px solid var(--modern-border); border-radius: 7px; background: rgba(255,255,255,.56); }
.investment-calculator .backtest-risk-timeline li + li::before { position: absolute; top: 50%; left: -15px; color: var(--modern-muted); font-size: 12px; content: "→"; transform: translateY(-50%); }
.investment-calculator .backtest-risk-timeline span { display: block; margin-bottom: 6px; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 500; line-height: 1.6; }
.investment-calculator .backtest-risk-timeline time { display: block; overflow-wrap: anywhere; color: var(--modern-text); font-size: var(--investment-value-size); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
.investment-calculator .backtest-risk-timeline strong { display: block; overflow-wrap: anywhere; color: var(--modern-text); font-size: var(--investment-value-size); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
.investment-calculator .backtest-risk-timeline .is-trough { border-color: rgba(61,109,158,.32); }
.investment-calculator .backtest-risk-analysis[data-drawdown-state="UNRECOVERED"] .is-recovery { border-color: rgba(61,109,158,.4); background: rgba(61,109,158,.055); }
.investment-calculator .backtest-risk-meta { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px 20px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--modern-border); }
.investment-calculator .backtest-risk-meta div { min-width: 0; }
.investment-calculator .backtest-risk-meta dt { color: var(--modern-muted); font-size: var(--investment-label-size); line-height: 1.6; font-weight: 500; }
.investment-calculator .backtest-risk-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--modern-text); font-size: var(--investment-value-size); font-weight: 600; line-height: 1.5; }
.investment-calculator [data-condition-toggle][hidden] { display: none; }
.investment-calculator [data-condition-close][hidden] { display: none; }
.investment-calculator [data-advanced-panel]:not([hidden]) { display: grid; grid-template-columns: 1fr; gap: 16px; }
.investment-calculator [data-advanced-panel] > label { margin: 0; }
.investment-calculator [data-advanced-panel] > p { grid-column: 1 / -1; }
.investment-calculator [data-advanced-panel] > .input-error { grid-column: 1 / -1; }
.investment-calculator .investment-ui-input-panel--stock .asset-search-combobox { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 48px auto; margin-bottom: 0; }
.investment-calculator .investment-ui-input-panel--stock .asset-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.investment-calculator .investment-ui-input-panel--stock .asset-search-market-tabs { grid-row: 1; justify-self: start; align-self: center; margin: 0; }
.investment-calculator .investment-ui-input-panel--stock .asset-search-input-wrap { grid-row: 2; min-width: 0; margin-top: var(--investment-control-space); }
.investment-calculator .investment-ui-input-panel--stock .asset-search-input { height: 46px; margin: 0; }
.investment-calculator .investment-ui-input-panel--stock .backtest-date-grid label { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 48px auto; align-items: center; }
.investment-calculator .investment-ui-input-panel--stock .backtest-amount-section > label { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 48px auto; align-items: center; }
.investment-calculator .investment-ui-input-panel--stock .backtest-period-shortcuts { margin: 0; }
.investment-calculator .backtest-result:focus { outline: none; }
.investment-calculator .backtest-edit-toggle:hover { background: var(--modern-soft); }
.investment-calculator .backtest-condition-summary { margin-bottom: 32px; padding: 24px 0; border-top: 1px solid var(--modern-border); border-bottom: 1px solid var(--modern-border); }
.investment-calculator .backtest-result-period-summary { order: -1; }
.investment-calculator .backtest-chart-tooltip > span { grid-template-columns: 7px minmax(0,1fr); gap: 6px 8px; padding: 14px 16px; border: 1px solid var(--modern-border); border-radius: 8px; background: var(--modern-soft); }
.investment-calculator .backtest-risk-analysis[data-drawdown-state="UNRECOVERED"] .backtest-risk-meta dd { font-size: var(--investment-body-size); font-weight: 500; }

@media (max-width: 820px) {
.investment-calculator .backtest-plan-toggle { width: 100%; }
.investment-calculator .backtest-result-actions { justify-content: flex-start; }
.investment-calculator .backtest-chart-heading { flex-direction: column; gap: 14px; }
.investment-calculator .backtest-chart-canvas { height: 300px; }
.investment-calculator .backtest-chart-tooltip { grid-template-columns: 1fr; gap: 8px; }
.investment-calculator .backtest-chart-tooltip > span { padding: 12px 14px; }
.investment-calculator .backtest-risk-heading { flex-direction: column; gap: 16px; }
.investment-calculator .backtest-risk-status { align-self: flex-start; }
.investment-calculator .backtest-risk-timeline { grid-template-columns: 1fr; gap: 24px; }
.investment-calculator .backtest-risk-timeline li + li::before { top: -22px; left: 28px; font-size: 16px; content: "↓"; transform: none; }
}
@media (max-width: 700px) {
.investment-calculator .calculator-menu-panel { right: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; transform: none !important; }
}
@media (max-width: 430px) {

.investment-calculator .backtest-result { padding-right: 20px; padding-left: 20px; }
.investment-calculator .backtest-result-actions { flex-direction: column; align-items: flex-end; }
.investment-calculator .backtest-result-actions .modern-share-status { right: 20px; }
.investment-calculator .backtest-chart-heading { flex-direction: column; gap: 12px; }
.investment-calculator .backtest-chart-canvas { height: 230px; }
.investment-calculator .backtest-chart-tooltip { gap: 7px 10px; }
.investment-calculator .backtest-chart-tooltip time { grid-column: 1 / -1; }
.investment-calculator .backtest-chart-tooltip span { grid-template-columns: 7px minmax(0,1fr); }
.investment-calculator .backtest-chart-tooltip strong { grid-column: 2; overflow: hidden; text-overflow: ellipsis; }
.investment-calculator .backtest-chart-tooltip em { grid-column: 2; }
.investment-calculator .backtest-chart-attribution { text-align: left; }
.investment-calculator .backtest-risk-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
.investment-calculator .backtest-risk-summary { grid-template-columns: 1fr; }
.investment-calculator .backtest-risk-timeline { grid-template-columns: 1fr; gap: 20px; }
.investment-calculator .backtest-risk-meta { grid-template-columns: 1fr; }
.investment-calculator .backtest-risk-timeline li + li::before { top: -16px; left: 50%; content: "↓"; transform: translateX(-50%); }
}
@media (min-width: 821px) {
.investment-calculator .investment-ui-input-panel--stock .backtest-date-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
.investment-calculator .backtest-comparison-table-wrap { overflow: visible; margin-bottom: 28px; }
.investment-calculator .backtest-comparison-table { display: block; }
.investment-calculator .backtest-comparison-table tbody { display: block; }
.investment-calculator .backtest-comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.investment-calculator .backtest-comparison-table tbody tr { display: block; margin-bottom: 16px; border: 1px solid var(--modern-border); border-radius: 8px; overflow: hidden; }
.investment-calculator .backtest-comparison-table tbody th:first-child { display: block; width: auto; padding: 12px 16px; border: 0; background: var(--modern-soft); text-align: left; font-size: 14px; }
.investment-calculator .backtest-comparison-table tbody td { display: block; width: auto; padding: 12px 16px; border: 0; text-align: right; font-size: 16px; }
.investment-calculator .backtest-comparison-table tbody td::before { display: block; margin-bottom: 4px; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 500; line-height: 1.5; text-align: left; white-space: normal; overflow-wrap: anywhere; content: attr(data-label); }
.investment-calculator .backtest-comparison-table tbody td:last-child { border-top: 1px solid var(--modern-border); background: var(--modern-soft); }
.investment-calculator .backtest-comparison-table .backtest-difference-label { display: none; }
}

/* Public design contract. Keep names and values in calculator-ui-guidelines.md in sync. */
.investment-calculator {
  --modern-bg: #fff;
  --modern-soft: #f6f8f7;
  --modern-border: #e3e9e6;
  --modern-border-strong: #d3ddd7;
  --modern-muted: #626d67;
  background: #fff;
  --investment-content-width: 1120px;
  --investment-gutter: 48px;
  --investment-page-title-size: clamp(30px, 4vw, 44px);
  --investment-section-title-size: 28px;
  --investment-item-title-size: 21px;
  --investment-body-size: 15px;
  --investment-label-size: 14px;
  --investment-caption-size: 13px;
  --investment-metric-size: 36px;
  --investment-value-size: 18px;
  --investment-section-space: 40px;
  --investment-item-space: 24px;
  --investment-paragraph-space: 12px;
  --investment-control-height: 46px;
  --investment-control-space: 7px;
  --investment-button-height: 48px;
  --investment-action-height: 44px;
  --investment-panel-radius: 14px;
  --investment-accent: #264e40;
  --investment-gain: #b04a3f;
  --investment-loss: #3d6d9e;
  --investment-warning: #805600;
  --investment-error: var(--color-danger);
  --investment-error-border: rgba(180,35,24,.14);
  --investment-error-background: #fff8f7;
  --investment-focus: #426b58;
  --content-width: var(--investment-content-width);
  --content-gutter: var(--investment-gutter);
  --control-height: var(--investment-control-height);
}
.investment-calculator main { padding-bottom: 64px; }
.investment-calculator .backtest-intro { padding: 48px 0 36px; }
.investment-calculator .backtest-intro h1 { margin: 0; font-size: var(--investment-page-title-size); font-weight: 700; line-height: 1.2; letter-spacing: -.045em; overflow-wrap: anywhere; }
.investment-calculator .backtest-intro > p:last-child { max-width: 800px; margin: 14px 0 0; color: var(--modern-muted); font-size: var(--investment-body-size); line-height: 1.7; }
.investment-calculator .backtest-workspace { display: block; min-width: 0; }
.investment-calculator .backtest-conditions { margin: 0 0 var(--investment-section-space); padding: 0; border: 0; background: transparent; scroll-margin-top: 110px; }
.investment-calculator .investment-ui-input-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 48px; min-width: 0; padding: 40px; border: 1px solid var(--modern-border); border-radius: var(--investment-panel-radius); background: var(--modern-surface); }
.investment-ui-input-panel > :is(.backtest-condition-heading, h2, nav, .backtest-inline-note, .backtest-empty-note, .backtest-loading, button[type=submit], .mdd-input-grid, .asset-search-combobox, .form-hint, details, [role=alert]) { grid-column: 1 / -1; }
.investment-calculator .backtest-condition-heading { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.investment-calculator :is(.investment-ui-input-panel, .investment-ui-result-header, .investment-ui-reading, .investment-ui-faq, .investment-ui-section, .investment-ui-section-header, .backtest-preview) h2 { margin: 0; color: var(--modern-text); font-size: var(--investment-section-title-size); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-input-panel label { display: block; min-width: 0; margin: 0 0 18px; color: var(--modern-text); font-size: var(--investment-label-size); font-weight: 650; line-height: 1.5; }
.investment-calculator .investment-ui-input-panel :is(input,select):where(:not([type=hidden]):not([type=checkbox]):not(.sr-only)) { display: block; width: 100%; min-width: 0; max-width: 100%; height: var(--investment-control-height); min-height: var(--investment-control-height); margin: var(--investment-control-space) 0 0; padding: 0 12px; border: 1px solid var(--modern-border); border-radius: 6px; background: var(--modern-surface); color: var(--modern-text); font-size: 16px; font-weight: 600; line-height: 1.5; }
.investment-calculator .investment-ui-input-panel input.asset-search-input { margin: 0; padding-right: 36px; }
.investment-calculator .investment-ui-input-panel :is(input,select):disabled { background: var(--modern-soft); color: var(--modern-muted); }
.investment-calculator .investment-ui-input-panel :is(input,select):focus { border-color: var(--investment-focus); box-shadow: 0 0 0 3px rgba(66,107,88,.15); }
.investment-calculator .investment-ui-input-panel :is(input,select):is(.is-invalid,[aria-invalid=true]) { border-color: var(--investment-error); background: var(--color-danger-soft); }
.investment-calculator :is(button, input, select, summary, a, [tabindex]):focus-visible { outline: 2px solid var(--investment-focus); outline-offset: 3px; }
.investment-calculator .backtest-submit { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; width: 100%; min-height: var(--investment-button-height); margin: 0; padding: 10px 16px; border: 1px solid var(--investment-accent); border-radius: 6px; background: var(--investment-accent); color: var(--modern-surface); font-size: 14px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.investment-calculator .backtest-submit:hover { background: #193e31; }
.investment-calculator .backtest-submit:disabled { opacity: .55; cursor: not-allowed; }
.investment-calculator :is(.backtest-edit-toggle, .mdd-chart-action, .mdd-episode-select, .backtest-result-actions .modern-share-button) { min-height: var(--investment-action-height); padding: 10px 14px; border: 1px solid var(--modern-border-strong); border-radius: 6px; background: var(--modern-surface); color: var(--modern-text); font: inherit; font-size: 14px; font-weight: 650; line-height: 1.5; cursor: pointer; }
.investment-calculator :is(.backtest-preview, .backtest-result) { min-width: 0; min-height: 0; margin: 0 0 var(--investment-section-space); padding: 0; background: transparent; }
.investment-calculator .backtest-preview p { margin: 12px 0 0; color: var(--modern-muted); font-size: var(--investment-body-size); font-weight: 400; line-height: 1.7; }
.investment-calculator .backtest-preview small { display: block; margin-top: 12px; color: var(--modern-muted); font-size: var(--investment-caption-size); line-height: 1.6; }
.investment-calculator .investment-ui-result-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.investment-ui-result-header > * { min-width: 0; }
.investment-calculator .backtest-result-comparison { margin: 12px 0 0; color: var(--modern-muted); font-size: var(--investment-body-size); font-weight: 400; line-height: 1.7; }
.investment-calculator .investment-ui-conditions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 24px; margin: 0 0 32px; padding: 20px 0; border-block: 1px solid var(--modern-border); font-variant-numeric: tabular-nums; }
.investment-ui-conditions > div { min-width: 0; }
.investment-calculator .investment-ui-conditions dt { color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 500; line-height: 1.5; }
.investment-calculator .investment-ui-conditions dd { margin: 5px 0 0; color: var(--modern-text); font-size: var(--investment-body-size); font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.investment-ui-conditions .backtest-result-period-summary { grid-column: 1 / -1; }
.investment-calculator .backtest-summary-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.investment-calculator .investment-ui-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0 0 var(--investment-section-space); padding: 0; font-variant-numeric: tabular-nums; }
.investment-calculator .investment-ui-metrics--single { grid-template-columns: minmax(0,1fr); }
.investment-calculator .investment-ui-metrics--pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
.investment-ui-metrics > div { min-width: 0; }
.investment-calculator .investment-ui-metrics dt { margin: 0 0 12px; color: var(--modern-muted); font-size: var(--investment-label-size); font-weight: 500; line-height: 1.5; }
.investment-calculator .investment-ui-metrics dd { margin: 0; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-metric-value { display: block; color: var(--investment-accent); font-size: var(--investment-metric-size); font-weight: 750; line-height: 1.3; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-metric-detail { color: var(--modern-text); font-size: var(--investment-value-size); font-weight: 600; line-height: 1.5; }
.investment-calculator .investment-ui-metrics .investment-ui-metric-context { margin-top: 12px; color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.investment-calculator .backtest-result [data-status=POSITIVE], .investment-calculator [data-status=POSITIVE] { color: var(--investment-gain); }
.investment-calculator .backtest-result [data-status=NEGATIVE], .investment-calculator [data-status=NEGATIVE], .investment-calculator .investment-ui-metric--loss { color: var(--investment-loss); }
.investment-calculator .backtest-result [data-status=NEUTRAL], .investment-calculator [data-status=NEUTRAL] { color: var(--modern-muted); }
.investment-calculator .investment-ui-chart { min-width: 0; margin: 0 0 36px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--modern-border); border-radius: 0; background: var(--modern-surface); }
.investment-calculator :is(.investment-ui-chart, .investment-ui-item, .backtest-summary-heading, .backtest-risk-heading) :is(h2,h3) { margin: 0; color: var(--modern-text); font-size: var(--investment-item-title-size); font-weight: 700; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-chart :is(.backtest-chart-legend, .leverage-chart-legend) { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; font-size: var(--investment-label-size); font-weight: 650; line-height: 1.5; }
.investment-calculator .investment-ui-chart .backtest-chart-legend b { font-weight: inherit; }
.investment-calculator :is(.investment-ui-reading, .investment-ui-faq) { min-width: 0; margin: var(--investment-section-space) 0; padding: 0; border: 0; }
.investment-calculator .investment-ui-reading .modern-guidance-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; text-align: left; }
.investment-calculator .investment-ui-reading .modern-guidance-list { border: 0; }
.investment-calculator .investment-ui-item { display: block; min-width: 0; margin: 0; padding: var(--investment-item-space) 0; border: 0; border-top: 1px solid var(--modern-border); }
.investment-calculator :is(.investment-ui-item, .investment-ui-disclosure, .investment-ui-faq, .investment-ui-section-header, .investment-ui-section) :where(p,nav) { max-width: 80ch; margin: var(--investment-paragraph-space) 0 0; color: var(--modern-muted); font-size: var(--investment-body-size); font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
.investment-calculator :is(.investment-ui-item, .investment-ui-disclosure) ul { margin: 12px 0 0; padding-left: 20px; color: var(--modern-muted); font-size: var(--investment-body-size); line-height: 1.7; }
.investment-calculator .investment-ui-example { min-width: 0; margin: 16px 0; padding: 16px; border: 1px solid var(--modern-border); border-radius: 6px; background: var(--modern-soft); }
.investment-calculator .investment-ui-example > p:first-child { margin-top: 0; }
.investment-calculator :is(.investment-ui-example, .mdd-table-wrap, .strategy-schedule-scroll, .leverage-table-scroll) { max-width: 100%; overflow-x: auto; }
.investment-calculator :is(.investment-ui-reading, .investment-ui-example, .mdd-table-wrap, .strategy-schedule-scroll, .leverage-table-scroll, .backtest-comparison-table-wrap) table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--investment-label-size); line-height: 1.5; font-variant-numeric: tabular-nums; }
.investment-calculator :is(.investment-ui-reading, .investment-ui-example, .mdd-table-wrap, .strategy-schedule-scroll, .leverage-table-scroll, .backtest-comparison-table-wrap) :is(th,td) { color: var(--modern-text); font-size: var(--investment-label-size); line-height: 1.5; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--modern-border); }
.investment-calculator .investment-ui-example table { min-width: 360px; }
.investment-calculator .investment-ui-reading table { table-layout: fixed; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-reading :is(th,td) { white-space: normal; }
.investment-calculator :is(.investment-ui-example, .mdd-table-wrap) caption { padding: 0 0 12px; margin: 0; text-align: left; color: var(--modern-muted); font-size: var(--investment-caption-size); line-height: 1.6; }
.investment-calculator :is(.investment-ui-reading, .investment-ui-faq) > h2 { margin-bottom: 24px; }
.investment-calculator .investment-ui-disclosure { margin: 0; padding: 0 0 16px; border: 0; border-top: 1px solid var(--modern-border); }
.investment-calculator .investment-ui-disclosure summary { min-height: var(--investment-action-height); padding: 12px 0; color: var(--modern-text); font-size: 16px; font-weight: 650; line-height: 1.6; cursor: pointer; overflow-wrap: anywhere; }
.investment-calculator :is(.investment-ui-input-panel, .investment-ui-disclosure, .investment-ui-section) :is(.backtest-section-note, .backtest-inline-note, .form-hint, .mdd-table-hint),
.investment-calculator :is(.backtest-section-note, .form-hint, .backtest-inline-note, .backtest-loading, .backtest-empty-note, .mdd-table-hint, .mdd-duration-unit, .backtest-chart-attribution, .leverage-reading-source) { color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; }
.investment-calculator .backtest-section-note { margin: 7px 0 18px; }
.investment-calculator .backtest-inline-note { margin: 12px 0; }
.investment-calculator :is(.investment-ui-input-panel, .investment-ui-disclosure, .backtest-preview, .backtest-result) :is(.input-error, .mdd-error, .leverage-error),
.investment-calculator :is(.input-error, .mdd-error, .leverage-error, .investment-ui-alert) { color: var(--investment-error); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; }
.investment-calculator :is([data-chart-error], [data-chart-empty], [data-mdd-chart-error], [data-leverage-chart-error], [data-chart-loading], .investment-ui-state) { text-align: left; margin: 24px 0; padding: 24px 16px; border: 1px dashed var(--modern-border-strong); border-radius: 6px; color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; }
.investment-calculator .backtest-result-disclaimer { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--modern-border); color: var(--modern-muted); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; }
/* Named layout variants change placement/count only, never shared typography. */
.investment-ui-input-panel--stock > .backtest-plan-section { grid-column: 1 / -1; }
.investment-ui-input-panel--stock > .backtest-target-section { grid-column: 1; grid-row: 3; }
.investment-ui-input-panel--stock > .backtest-benchmark-section { grid-column: 1; grid-row: 4; }
.investment-ui-input-panel--stock > .backtest-period-section { grid-column: 2; grid-row: 3; }
.investment-ui-input-panel--stock > .backtest-amount-section { grid-column: 2; grid-row: 4; }
.investment-ui-input-panel--strategy > .backtest-target-section { grid-column: 1 / -1; }
.investment-calculator .investment-ui-input-panel--leverage { align-items: start; }
.investment-ui-input-panel--leverage > :is(.leverage-matching, .backtest-date-grid) { grid-column: 1 / -1; }
@media (min-width: 1050px) {
  .investment-calculator .investment-ui-input-panel--strategy { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .investment-calculator { --investment-gutter: 32px; --investment-metric-size: 28px; }
  .investment-calculator .backtest-intro { padding: 32px 0 28px; }
  .investment-calculator .investment-ui-input-panel { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 22px 18px; }
  .investment-ui-input-panel--stock > .backtest-section { grid-column: 1; grid-row: auto; }
  .investment-calculator .investment-ui-result-header { flex-direction: column; gap: 16px; }
  .investment-calculator .investment-ui-metrics { grid-template-columns: minmax(0,1fr); }
  .investment-ui-metrics > div + div { padding-top: 20px; border-top: 1px solid var(--modern-border); }
  .investment-calculator .investment-ui-conditions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) { .investment-calculator { --investment-item-title-size: 19px; } }
@media (max-width: 430px) {
  .investment-calculator { --investment-gutter: 20px; }
  .investment-calculator .investment-ui-conditions:not(.investment-ui-conditions--matching):not(.investment-ui-conditions--pair) { grid-template-columns: minmax(0,1fr); }
}
.investment-calculator main p { font-size: var(--investment-body-size); font-weight: 400; line-height: 1.7; }
.investment-calculator .investment-ui-section { margin: 0 0 36px; padding: 24px 0 0; border-top: 1px solid var(--modern-border); }
.investment-calculator .investment-ui-section > h2 { margin-bottom: 12px; }
.investment-calculator .backtest-method-note { margin: 0; }
.investment-calculator .leverage-modes a { min-height: var(--investment-action-height); padding: 10px 14px; border: 1px solid var(--modern-border); border-radius: 6px; color: var(--modern-text); font-size: var(--investment-label-size); line-height: 1.5; }
.investment-calculator .strategy-choice strong { color: var(--modern-text); font-size: var(--investment-item-title-size); line-height: 1.5; }
.investment-calculator .strategy-conclusion { margin: 24px 0; padding: 16px; border-radius: 6px; background: var(--modern-soft); }
.investment-calculator .mdd-results > p, .investment-calculator .leverage-result > p, .investment-calculator .leverage-explanation { color: var(--modern-muted); }
.investment-calculator .investment-ui-input-panel--leverage > .investment-ui-conditions { grid-column: 1 / -1; margin: 0; }
.investment-calculator :is(.investment-ui-conditions--matching, .investment-ui-conditions--pair) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.investment-calculator .mdd-loss-stats dd { white-space: normal; overflow-wrap: anywhere; }
.investment-calculator .investment-ui-input-panel .sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.investment-calculator :is(.investment-ui-example, .mdd-table-wrap, .strategy-schedule-scroll, .leverage-table-scroll, .backtest-comparison-table-wrap) thead th { background: var(--modern-soft); font-weight: 650; }
.investment-calculator .investment-ui-example :is(th,td) { text-align: left; }
.investment-calculator .investment-ui-example tbody th { font-weight: 500; }

.investment-calculator .strategy-choice { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--modern-border); }
.investment-calculator .leverage-table-status { display: inline-block; padding: 5px 9px; border-radius: 6px; font-size: var(--investment-caption-size); font-weight: 650; line-height: 1.6; color: var(--modern-text); background: var(--modern-soft); }

.investment-calculator :is(.backtest-preview, .investment-ui-input-panel) .investment-ui-alert,
.investment-calculator :is(.investment-ui-alert, .errors) { margin-block: 12px; padding: 10px 14px; border: 1px solid var(--investment-error-border); border-radius: 6px; background: var(--investment-error-background); color: var(--investment-error); font-size: var(--investment-caption-size); font-weight: 400; line-height: 1.6; }