/* Functional additions to the original light design in styles.css.
   Original typography, spacing, cards, inputs and buttons remain authoritative. */
:root {
  color-scheme: light;
  --chart-middle: #2563eb;
  --chart-best: #0891b2;
  --chart-worst: #64748b;
  --surface-raised: #f8fafc;
  --label: #334155;
  --input: #ffffff;
  --input-border: #dbe3ef;
  --warning-bg: #fff7ed;
  --warning-line: #fed7aa;
  --cookie-offset: 0px;
}
/* Retained for calculation-mode translations; original sections flow vertically. */
.calculator-workspace { display: block; }
@media (min-width: 561px) {
  .calculator-tabs:has(> a:nth-child(3)):not(:has(> a:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Working settings and notices, without altering the original header geometry. */
.site-header { z-index: 150; }
.nav-more-menu { max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; }
.menu-preferences { margin-top: 10px; padding: 14px 10px 4px; border-top: 1px solid var(--line); }
.menu-preferences .theme-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr); align-items: center; gap: 10px; }
.menu-preferences .theme-control-label { display: block; width: auto; min-height: 0; padding: 0; color: var(--muted); font-size: .9rem; font-weight: 750; }
.theme-control select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; color: var(--text); background: var(--input); border: 1px solid var(--line); border-radius: var(--radius-md); }
.theme-control select:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.cookie-banner { top: auto; bottom: 18px; }
.language-suggestion-banner { bottom: calc(var(--cookie-offset) + 18px) !important; }
.cookie-banner.cookie-inline { position: static; inset: auto; width: 100%; max-width: none; margin: 24px 0 0; }
/* Completed-result status and arithmetic-mean supporting information. */
.mc-result-state, .result-stale, .result-dirty-notice, .model-warning { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--warning-line); border-radius: var(--radius-md); color: var(--warning); background: var(--warning-bg); line-height: 1.6; }
.mc-result-state:empty, .result-stale:empty, .model-warning:empty, .result-input-summary:empty, .result-risk-summary:empty { display: none; }
.mc-result-state[data-result-state="current"], .mc-result-state[data-result-state="calculating"] { border-color: var(--line); color: var(--muted); background: var(--surface-raised); }
.result-input-summary { margin: 0 0 18px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.result-risk-summary { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; margin: 0 0 18px; }
.result-risk-summary-label, .result-risk-summary-count { color: var(--muted); }
.result-risk-summary-value { color: var(--text); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.result-return-label { margin: 0; color: var(--muted); font-size: .9rem; }
.result-capital { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 14px 0 0; color: var(--muted); }
.result-capital strong { color: var(--text); font-variant-numeric: tabular-nums; }
.result-risk-preview { margin: 14px 0 0; color: var(--muted); }
.result-card { min-width: 0; }
.result-main-value, .result-capital strong { overflow-wrap: anywhere; }
.result-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.result-details summary, .chart-methodology summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--primary); cursor: pointer; list-style: none; }
.result-details summary::-webkit-details-marker, .chart-methodology summary::-webkit-details-marker { display: none; }
.result-details summary:focus-visible, .chart-methodology summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.result-details .details-open, .chart-methodology .details-open { display: none; }
.result-details[open] .details-open, .chart-methodology[open] .details-open { display: inline; }
.result-details[open] .details-closed, .chart-methodology[open] .details-closed { display: none; }
.result-details-action { flex: 0 0 auto; }
.result-details[open] .result-details-action, .chart-methodology[open] .result-details-action { transform: rotate(45deg); }
.chart-methodology { margin-top: 18px; }
.chart-methodology p + p { margin-top: 10px; }
.risk-summary { margin-bottom: 18px; }
.risk-summary-heading { color: var(--muted); }
.risk-summary-grid, .distribution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 16px 0; }
.risk-summary-grid > div, .distribution-grid > div { min-width: 0; }
.risk-summary-grid dt, .distribution-grid dt { color: var(--muted); }
.risk-summary-grid dd, .distribution-grid dd { margin: 6px 0 0; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sample-distribution { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.sample-distribution h3 { margin-top: 0; }
.distribution-grid p, .sample-summary { color: var(--muted); font-size: .9rem; font-weight: 400; }
.distribution-grid p { margin-top: 6px; }
.share-manual-copy { display: grid; gap: 8px; width: 100%; color: var(--muted); }
.share-manual-copy input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 14px; background: var(--input); color: var(--text); font: inherit; }
/* Monthly saving uses the original form's type scale and field spacing. */
.compound-mode-choice, .compound-savings-fields { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.compound-mode-choice legend, .compound-savings-fields legend { padding: 0; margin-bottom: 12px; color: var(--text); font-weight: 750; }
.compound-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compound-mode-options label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--text); cursor: pointer; }
.compound-mode-options label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.compound-mode-options input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--primary); }
.compound-mode-options label:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; }
.compound-savings-fields select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 14px; background: var(--input); color: var(--text); }
.compound-savings-fields select:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.compound-assumption-note { color: var(--muted); font-size: .92rem; }
.compound-example-button { width: 100%; margin-bottom: 18px; white-space: normal; }
.result-dirty-notice p { margin: 0 0 10px; }
/* Optional dark mode changes colors; the original light design is the default. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;
  --card: #182338;
  --text: #edf3ff;
  --muted: #acbdd4;
  --line: #34445d;
  --primary: #8ab8ff;
  --primary-hover: #acd0ff;
  --primary-soft: #223d63;
  --positive: #75d9a2;
  --negative: #ff9696;
  --neutral: #c2cee0;
  --warning: #ffd39a;
  --danger: #ff9696;
  --shadow: 0 20px 50px rgba(0, 0, 0, .22);
  --surface-raised: #1e2d44;
  --label: #d1dff0;
  --input: #111d30;
  --input-border: #405573;
  --warning-bg: #352a1d;
  --warning-line: #725831;
  --chart-middle: #8ab8ff;
  --chart-best: #67d8e8;
  --chart-worst: #c1cad9;
}
:root[data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34rem), linear-gradient(180deg, #15213a 0%, var(--bg) 38%, #111b2d 100%); }
:root[data-theme="dark"] .site-header { background: rgba(15, 23, 42, .94); border-color: var(--line); }
:root[data-theme="dark"] :is(.card, .related-card, .faq-item, .premium-tool-card, .premium-tool-section-block, .homepage-tool-card, .homepage-trust-grid article, .export-actions, .policy-card) { color: var(--text); background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] :is(.nav-current-tool, .nav-more summary, .language-control select, .nav-more-menu, .calculator-tabs, .chart-view-button, .button-ghost) { color: var(--text); background: var(--surface-raised); border-color: var(--line); }
:root[data-theme="dark"] :is(.nav-current-tool, .language-control select) { box-shadow: none; }
:root[data-theme="dark"] :is(.nav-more[open] summary, .nav-more-menu a:hover, .nav-more-menu a:focus-visible, .nav-more-menu a.active, .calculator-tabs a.active, .calculator-tabs a[aria-current="page"], .calculator-tabs a:hover) { background: var(--primary-soft); color: var(--primary); border-color: var(--line); }
:root[data-theme="dark"] :is(.button-primary, .chart-view-button.active) { background: #2563eb; color: #fff; border-color: #2563eb; }
:root[data-theme="dark"] .button-primary:hover:not(:disabled) { background: #1d4ed8; }
:root[data-theme="dark"] .button-danger { background: #49282e; color: var(--danger); border-color: #80535e; }
:root[data-theme="dark"] :is(.field-group input, .field-group select, .share-manual-copy input) { background: var(--input); color: var(--text); border-color: var(--input-border); }
:root[data-theme="dark"] :is(.premium-tool-card p, .premium-tool-card li, .premium-tool-section-block p, .premium-tool-section-block li, .cookie-banner p, .cookie-banner span) { color: var(--muted); }
:root[data-theme="dark"] :is(.cookie-banner, .language-suggestion-banner, .responsible-note, .data-freshness-note, .hero-flow span, .homepage-trust-links a) { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] :is(.premium-tool-kicker, .premium-tool-badge, .homepage-card-kicker) { background: var(--primary-soft); color: var(--primary); border-color: var(--line); }
:root[data-theme="dark"] :is(.warning-message, .model-warning) { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
:root[data-theme="dark"] .metric-list li { border-color: var(--line); }
:root[data-theme="dark"] .site-footer { background: #111b2d; border-color: var(--line); }
:root[data-theme="dark"] .data-table :is(th, td) { border-color: var(--line); }
:root[data-theme="dark"] .data-table th { background: var(--surface-raised); color: var(--text); }
:root[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-raised); }
:root[data-theme="dark"] body:not(.currency-page):not(.commodity-page) #table-section :is(.table-card, .data-table tr) { background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] body:not(.currency-page):not(.commodity-page) #table-section .data-table td:first-child { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] body.currency-page :is(.currency-converter-card, .currency-chart-card, .currency-rates-card, .currency-result-panel, .currency-form-panel, .currency-info-card, .currency-feature-card, .currency-rate-row, .currency-rate-row-delete, .currency-picker-menu, .currency-search-results) { background: var(--card); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] body.currency-page :is(.currency-rate-cell-shell, .currency-converter-row, .currency-compact-meta.data-provenance, .data-provenance__item, .source-note, .freshness-badge) { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] body.currency-page :is(input, select) { color: var(--text); }
:root[data-theme="dark"] body.currency-page .data-provenance__item--wide { background: transparent; border-color: transparent; }
:root[data-theme="dark"] .skip-link { background: #2563eb; color: #fff; }
:root[data-theme="dark"] .related-card span,
:root[data-theme="dark"] body.currency-page .related-card .currency-label-text { color: var(--muted); }
.policy-card p a, .policy-card li a { text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 560px) {
  :root[data-theme="dark"] .top-nav { background: var(--surface-raised); border-color: var(--line); }
  .risk-summary-grid, .distribution-grid { grid-template-columns: 1fr; gap: 14px; }
  .risk-summary-grid > div + div, .distribution-grid > div + div { border-top: 1px solid var(--line); padding-top: 14px; }
  .compound-mode-options { grid-template-columns: 1fr; }
  .cookie-banner { bottom: 12px; }
  .language-suggestion-banner { bottom: calc(var(--cookie-offset) + 12px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .chart-view-button { transition: none; }
  .button:hover:not(:disabled), .chart-view-button:hover { transform: none; }
}