/* Monte Carlo savings simulator -- page-specific styles. Reuses the brand variables defined in main.css (:root). Dark surface only, matching the rest of the site. No inline styles anywhere so the page stays within the site-root Content-Security-Policy (script-src/style-src 'self'). */ /* --- Page shell --- */ #sim { padding: 60px 0 90px; background: radial-gradient(circle at top, #1c2128 0%, var(--bg-deep) 100%); } #sim .inner { max-width: 1180px; } .sim-head { text-align: center; margin-bottom: 3rem; } .sim-head h1 { font-size: 2.6rem; line-height: 1.15; margin-bottom: 1rem; } .sim-head h1 span { color: var(--brand-blue); } .sim-head p { max-width: 720px; margin: 0 auto; color: var(--text-primary); font-size: 1.1rem; } /* --- Layout: controls beside the results --- */ .sim-layout { display: flex; gap: 2.5rem; align-items: flex-start; } .sim-controls { flex: 0 0 320px; background: var(--bg-lift); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1.75rem; } .sim-results { flex: 1; min-width: 0; } /* --- Control fields --- */ .field { margin-bottom: 1.4rem; } .field:last-child { margin-bottom: 0; } .field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); margin-bottom: 0.55rem; } .field .val { color: var(--brand-blue); font-variant-numeric: tabular-nums; } .field input[type="number"] { width: 100%; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-primary); font-size: 1rem; font-family: inherit; padding: 0.65rem 0.8rem; } .field input[type="number"]:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-glow); } .field input[type="range"] { width: 100%; accent-color: var(--brand-blue); cursor: pointer; } .field .hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.35rem; } .sim-note { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border-subtle); font-size: 0.72rem; color: var(--text-muted); line-height: 1.6; } /* --- Stat tiles --- */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; } .stat { background: var(--bg-lift); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1.1rem 1.2rem; } .stat .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem; } .stat .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; } .stat .stat-value.accent { color: var(--brand-blue); } .stat .stat-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; } /* --- Chart --- */ .chart-card { background: var(--bg-lift); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1.5rem 1.5rem 1.25rem; } .chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .chart-head h2 { font-size: 1.1rem; } .chart-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--text-muted); } .legend-swatch { width: 22px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .legend-swatch.median { height: 3px; background: var(--brand-blue); } .legend-swatch.band-inner { background: rgba(88, 170, 219, 0.32); } .legend-swatch.band-outer { background: rgba(88, 170, 219, 0.14); } .legend-swatch.contrib { height: 0; border-top: 2px dashed var(--text-muted); border-radius: 0; } .chart-wrap { position: relative; width: 100%; } canvas#fan { display: block; width: 100%; height: 380px; } /* Tooltip drawn as a positioned DOM node (kept out of the canvas so text is selectable and crisp). Hidden until the pointer is over the plot. */ .chart-tip { position: absolute; pointer-events: none; background: rgba(13, 17, 23, 0.96); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 0.6rem 0.75rem; font-size: 0.75rem; color: var(--text-primary); min-width: 150px; transform: translate(-50%, -110%); transition: opacity 0.12s ease; z-index: 5; } .chart-tip[hidden] { display: none; } .chart-tip .tip-year { font-weight: 700; margin-bottom: 0.35rem; } .chart-tip .tip-row { display: flex; justify-content: space-between; gap: 1.25rem; font-variant-numeric: tabular-nums; } .chart-tip .tip-row span:first-child { color: var(--text-muted); } /* --- Table view (accessibility fallback) --- */ .table-toggle { margin-top: 1.25rem; background: none; border: 1px solid var(--border-subtle); color: var(--brand-blue); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } .table-toggle:hover { border-color: var(--brand-blue); } .sim-table-wrap { margin-top: 1.25rem; overflow-x: auto; } .sim-table-wrap[hidden] { display: none; } table.sim-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; } table.sim-table caption { text-align: left; color: var(--text-muted); font-size: 0.75rem; margin-bottom: 0.6rem; } table.sim-table th, table.sim-table td { text-align: right; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); } table.sim-table th { color: var(--text-primary); font-weight: 600; } table.sim-table th:first-child, table.sim-table td:first-child { text-align: left; } table.sim-table tbody tr:hover td { background: var(--bg-lift); } /* --- Responsive --- */ @media screen and (max-width: 900px) { .sim-layout { flex-direction: column; } .sim-controls { flex: 1 1 auto; width: 100%; } .stat-row { grid-template-columns: repeat(2, 1fr); } .sim-head h1 { font-size: 2rem; } }