/* Personal Portfolio calculator (US-PP-006). Brand tokens only. */
#calculator .pp-educational {
    max-width: 720px;
    margin: 0 auto 2rem;
    padding: 1rem 1.25rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    color: #475569;
    line-height: 1.6;
}

/* Charts (US-PP-007). Colours are custom properties so the page can retheme one place. */
.pp-chart {
    --pp-primary: #1E3A8A;
    --pp-secondary: #0F766E;
    --pp-accent: #F59E0B;
    --pp-grey-text: #475569;
    --pp-grey-mid: #94A3B8;
    --pp-grey-light: #E2E8F0;
    position: relative;
    width: 100%;
    color: var(--pp-grey-text);
    font-family: 'Lato', sans-serif;
}
.pp-chart-svg { display: block; height: auto; }
.pp-chart text { fill: currentColor; font-family: 'Lato', sans-serif; }
.pp-chart .pp-tick { font-size: 12px; }
.pp-chart .pp-axis-label { font-size: 13px; }
.pp-chart .pp-gridline { stroke: var(--pp-grey-light); stroke-width: 1; }
.pp-chart .pp-axis { stroke: var(--pp-grey-mid); stroke-width: 1; }
.pp-chart .pp-line { stroke: var(--pp-primary); stroke-width: 2.5; }
.pp-chart .pp-line--secondary { stroke: var(--pp-secondary); }
.pp-chart .pp-line--grey { stroke: var(--pp-grey-mid); }
.pp-chart .pp-bar { fill: var(--pp-primary); }
.pp-chart .pp-bar--secondary { fill: var(--pp-secondary); }
.pp-chart .pp-bar--grey { fill: var(--pp-grey-mid); }
.pp-chart .pp-dot { fill: var(--pp-primary); stroke: #fff; stroke-width: 1.5; }
.pp-chart .pp-dot--secondary { fill: var(--pp-secondary); }
.pp-chart .pp-dot--accent { fill: var(--pp-accent); }
.pp-chart .pp-dot--grey { fill: var(--pp-grey-mid); }
.pp-chart .pp-dot:focus { outline: none; stroke: var(--pp-accent); stroke-width: 3; }
.pp-tooltip {
    z-index: 5;
    max-width: 240px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: var(--pp-grey-text, #475569);
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Part 1: the job as a bond (US-PP-008) */
.pp-time { max-width: 720px; margin: 0 auto 3rem; }
.pp-explainer { color: #475569; line-height: 1.6; }
.pp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.25rem 0; align-items: end; }
.pp-field { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; color: #1E293B; }
.pp-field input { padding: 0.5rem 0.75rem; border: 1px solid #CBD5E1; border-radius: 8px; font: inherit; }
.pp-field input[aria-invalid="true"] { border-color: #B91C1C; }
.pp-error { min-height: 1.1em; color: #B91C1C; font-size: 0.8125rem; font-weight: 400; }
.pp-chart-caption { margin: 4px 0 0; color: #64748B; font-size: 0.8125rem; }
.pp-hint { color: #64748B; font-size: 0.8125rem; font-weight: 400; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0 0 1rem; align-items: end; }
.pp-stats dt { color: #64748B; font-size: 0.875rem; }
.pp-stats dd { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1E3A8A; }
.pp-caption { color: #64748B; font-size: 0.875rem; }
.pp-chart .pp-line--accent { stroke: var(--pp-accent); }

/* Part 1: the venture comparison (US-PP-009) */
.pp-venture { margin-top: 3rem; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-scenarios, .pp-scn-out { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.pp-scenarios th, .pp-scn-out th { text-align: left; color: #64748B; font-size: 0.875rem; font-weight: 600; padding: 0.25rem 0.5rem; }
.pp-scenarios td, .pp-scn-out td { padding: 0.25rem 0.5rem; }
.pp-scn-out tbody th { color: #1E293B; }
.pp-scenarios input { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid #CBD5E1; border-radius: 8px; font: inherit; box-sizing: border-box; }
.pp-scn-del { background: none; border: 0; color: #1E3A8A; text-decoration: underline; cursor: pointer; font: inherit; }
.pp-scn-del:disabled, .pp-scn-add:disabled { opacity: 0.4; cursor: not-allowed; }
.pp-prob-total { color: #475569; margin: 0.25rem 0 0.75rem; }
.pp-prob-total.pp-prob-bad { color: #B91C1C; font-weight: 600; }
.pp-greyed { opacity: 0.6; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0.5rem 0; color: #475569; font-size: 0.875rem; }
.pp-swatch { display: inline-block; width: 1.5rem; height: 3px; margin-right: 0.4rem; vertical-align: middle; background: #1E3A8A; }
.pp-swatch.pp-line--secondary { background: #0F766E; }
.pp-swatch.pp-line--grey { background: #94A3B8; }
.pp-swatch--thin { height: 1.5px; }

/* US-PP-010: two-axis job chart legend and spacing */
.pp-swatch.pp-line--accent { background: #F59E0B; }
.pp-swatch--bar { width: 0.75rem; height: 0.75rem; }
.pp-swatch.pp-bar--secondary { background: #0F766E; }
.pp-scn-add { margin-bottom: 1.5rem; }
.pp-assumption { margin: 0 0 1rem; }

/* Phone width: each scenario becomes a small card with visible labels. */
@media (max-width: 600px) {
    .pp-scenarios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pp-scenarios, .pp-scenarios tbody { display: block; }
    .pp-scenarios tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid #E2E8F0; }
    .pp-scenarios td { display: block; padding: 0; }
    .pp-scenarios td:first-child { grid-column: 1 / -1; }
    .pp-scenarios td:last-child { grid-column: 1 / -1; }
    .pp-scenarios td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; color: #64748B; font-size: 0.8125rem; font-weight: 600; }
}

/* Holdings table (US-PP-011) */
.pp-portfolio { margin-top: 3rem; }
.pp-networth { font-weight: 700; color: #1E293B; }
.pp-table-wrap { overflow-x: auto; }
.pp-holdings { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pp-holdings th { text-align: left; padding: 0.4rem; color: #475569; border-bottom: 2px solid #E2E8F0; white-space: nowrap; }
.pp-holdings td { padding: 0.3rem; border-bottom: 1px solid #E2E8F0; }
.pp-holdings input[type="text"], .pp-holdings input[type="number"], .pp-holdings select { width: 100%; min-width: 4.5rem; padding: 0.4rem; border: 1px solid #CBD5E1; border-radius: 6px; font: inherit; }
.pp-holdings input:disabled { background: #F1F5F9; color: #64748B; }
.pp-remove { background: none; border: 0; font-size: 1.25rem; color: #64748B; cursor: pointer; }
.pp-actions { display: flex; gap: 0.75rem; margin: 1rem 0; }
.pp-caveats { color: #475569; line-height: 1.6; }
@media (max-width: 600px) {
    .pp-holdings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pp-holdings tr { display: block; margin-bottom: 1rem; padding: 0.5rem; border: 1px solid #E2E8F0; border-radius: 10px; }
    .pp-holdings td { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border: 0; }
    .pp-holdings td[data-label]::before { content: attr(data-label); font-weight: 600; color: #475569; }
    .pp-holdings td input[type="text"], .pp-holdings td input[type="number"], .pp-holdings td select { width: 55%; }
}

.pp-corr { margin: 1rem 0; }
.pp-corr summary { cursor: pointer; font-weight: 600; }
.pp-corr-grid th, .pp-corr-grid td { padding: 0.125rem; font-size: 0.8125rem; text-align: left; }
.pp-corr-grid input { width: 4.5rem; }
.pp-corr-grid input.pp-edited { background: #FEF3C7; border-color: #D97706; }

/* Part 2 results (US-PP-013) */
.pp-results { margin-top: 2rem; }
.pp-res-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.pp-res-card { border: 1px solid #E2E8F0; border-radius: 8px; padding: 1rem; background: #fff; }
.pp-res-card h3 { margin: 0 0 0.5rem; font-size: 1rem; color: #1E3A8A; }
.pp-res-card p { margin: 0 0 0.5rem; }
.pp-res-card ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }

/* US-PP-014: frontier chart */
.pp-frontier { max-width: 720px; margin: 0 auto 3rem; }
.pp-chart .pp-line--primary { stroke: var(--pp-primary); }
.pp-chart .pp-line--thin { stroke-width: 1.25; }
.pp-chart .pp-dot--hit { fill: transparent; stroke: none; cursor: pointer; }
.pp-chart .pp-dot--hit:focus { stroke: var(--pp-accent); stroke-width: 2; }
.pp-chart .pp-dot-label { font-size: 11px; fill: var(--pp-grey-text, #475569); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pp-chart .pp-pin { fill: none; stroke: var(--pp-primary); stroke-width: 2; pointer-events: none; }
.pp-chart .pp-mark--gmv, .pp-key.pp-mark--gmv { fill: #fff; stroke: var(--pp-primary); stroke-width: 2.5; }
.pp-chart .pp-mark--sharpe, .pp-key.pp-mark--sharpe { fill: #fff; stroke: var(--pp-secondary); stroke-width: 2.5; }
.pp-chart .pp-mark--ret, .pp-key.pp-mark--ret { fill: #fff; stroke: #475569; stroke-width: 2.5; }
.pp-chart .pp-mark--risk, .pp-key.pp-mark--risk { fill: #fff; stroke: #1E293B; stroke-width: 2.5; stroke-dasharray: 3 2; }
.pp-key { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; border-radius: 50%; border: 2px solid #94A3B8; background: #fff; vertical-align: middle; box-sizing: border-box; }
.pp-key--grey { background: #94A3B8; }
.pp-key.pp-dot--accent { background: #F59E0B; border-color: #fff; box-shadow: 0 0 0 1px #F59E0B; }
.pp-key.pp-mark--gmv { border-color: #1E3A8A; }
.pp-key.pp-mark--sharpe { border-color: #0F766E; }
.pp-key.pp-mark--ret { border-color: #475569; }
.pp-key.pp-mark--risk { border-color: #1E293B; border-style: dashed; }
.pp-swatch--dashed { background: repeating-linear-gradient(90deg, #94A3B8 0 6px, transparent 6px 10px); }
.pp-tip-weights { margin: 0.25rem 0 0; padding-left: 1rem; }

.pp-rb-group th { text-align: left; background: #F1F5F9; font-size: 0.8125rem; }
.pp-rb-moves { margin: 0.75rem 0; padding-left: 1.25rem; }
.pp-share { margin: 0 0 1.5rem; }
.pp-share .pp-actions { margin: 0 0 0.5rem; }
.pp-share-url { width: 100%; margin-top: 0.5rem; font-size: 0.8125rem; }

/* US-PP-017: page copy, focus, and narrow screens */
.pp-copy { max-width: 720px; line-height: 1.6; color: #475569; }
.pp-copy h2, .pp-copy h3 { color: #1E293B; }
.pp-defaults { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; }
.pp-defaults th, .pp-defaults td { text-align: left; padding: 0.4rem; border-bottom: 1px solid #E2E8F0; vertical-align: top; }
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th, .pp-table td { text-align: left; padding: 0.4rem; border-bottom: 1px solid #E2E8F0; }
#calculator input:focus-visible, #calculator select:focus-visible, #calculator button:focus-visible,
#calculator summary:focus-visible, #defaults a:focus-visible { outline: 3px solid #0F766E; outline-offset: 2px; }
.pp-chart .pp-dot--hit:focus-visible { outline: 3px solid #0F766E; }
#calculator { overflow-x: hidden; }
#calculator select, #calculator input { max-width: 100%; box-sizing: border-box; }
.pp-share-url { box-sizing: border-box; }
@media (max-width: 600px) {
    .pp-actions { flex-wrap: wrap; }
    .pp-fields { grid-template-columns: 1fr; }
}
.pp-copy h2 { margin: 2rem 0 0.75rem; }
.pp-copy h3 { margin: 1.5rem 0 0.5rem; }

/* US-PP2-006: Part 3 tabs */
.pp-test { margin-top: 2.5rem; }
.pp-dollars { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pp-dollars legend { padding: 0; margin-bottom: 0.25rem; color: #475569; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid #E2E8F0; margin-bottom: 1rem; }
.pp-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 0.6rem 1rem; font: inherit; color: #475569; cursor: pointer; }
.pp-tab[aria-selected="true"] { color: #1E3A8A; border-bottom-color: #1E3A8A; font-weight: 700; }
.pp-tab:focus-visible, .pp-tabpanel:focus-visible { outline: 3px solid #0F766E; outline-offset: 2px; }

/* US-PP2-007: risk parity marker and the Risk tab */
.pp-chart .pp-mark--parity, .pp-key.pp-mark--parity { fill: #fff; stroke: #B45309; stroke-width: 2.5; stroke-dasharray: 1 2; }
.pp-key.pp-mark--parity { border-color: #B45309; border-style: dotted; }
.pp-risk-bars { margin: 1rem 0; }
.pp-risk-row { margin: 0 0 0.9rem; }
.pp-risk-name { font-weight: 600; margin: 0 0 0.25rem; }
.pp-risk-bar { display: grid; grid-template-columns: 10rem 1fr 3.5rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #475569; }
@media (max-width: 600px) { .pp-risk-bar { grid-template-columns: 7.5rem 1fr 3rem; } }
.pp-risk-sentence { margin: 0.75rem 0 0; font-weight: 600; }
.pp-risk .pp-fields { max-width: 24rem; }
.pp-risk-track { position: relative; height: 0.9rem; background: #F1F5F9; }
.pp-risk-fill { position: absolute; top: 0; bottom: 0; background: #1E3A8A; }
.pp-risk-fill--risk { background: #0F766E; }
.pp-risk-fill--neg { background: #B45309; }
.pp-risk-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: #64748B; }

/* US-PP2-008: Backtest tab */
.pp-backtest h3 { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; }
.pp-bt-metrics td { font-variant-numeric: tabular-nums; }

/* US-PP2-010: Monte Carlo tab */
.pp-montecarlo h3 { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; }
.pp-mc-band { stroke: none; }
.pp-mc-band--wide { fill: rgba(30, 58, 138, 0.12); }
.pp-mc-band--mid { fill: rgba(30, 58, 138, 0.28); }
.pp-swatch--band { background: rgba(30, 58, 138, 0.12); }
.pp-swatch--band-dark { background: rgba(30, 58, 138, 0.28); }
.pp-mc-answer { margin: 0.5rem 0; font-size: 1.05rem; }
.pp-mc-table td { font-variant-numeric: tabular-nums; }

/* US-PP2-011: Correlations tab */
.pp-corr .pp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.pp-corr select, .pp-test select { padding: 0.5rem 0.75rem; border: 1px solid #CBD5E1; border-radius: 8px; font: inherit; }
.pp-chart .pp-line--zero { stroke: #64748B; stroke-width: 1; }
.pp-corr-table td { font-variant-numeric: tabular-nums; }
.pp-corr-flag th, .pp-corr-flag td { background: #FEF3C7; }
.pp-corr-note { font-weight: 600; }
.pp-corr-pairs h3 { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; }

/* Plain-language terms: a dotted word that opens its definition (terms.js). */
.pp-term {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: help;
    text-decoration: underline dotted #94A3B8;
    text-underline-offset: 3px;
}
.pp-term:hover, .pp-term[aria-expanded="true"] { text-decoration-color: #1E3A8A; }
.pp-term:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; border-radius: 2px; }
.pp-term-pop {
    position: absolute;
    z-index: 50;
    max-width: min(340px, calc(100vw - 16px));
    padding: 0.75rem 0.875rem;
    background: #fff;
    color: #1E293B;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: left;
}
.pp-term-pop a { color: #1E3A8A; white-space: nowrap; }

/* Start here box at the top of the calculator. */
.pp-start {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #0F766E;
    border-radius: 8px;
    background: #F8FAFC;
    line-height: 1.6;
}
.pp-start h2 { margin-top: 0; font-size: 1.5rem; }
.pp-start ol { padding-left: 1.25rem; margin: 0.75rem 0; }
.pp-start li { margin-bottom: 0.5rem; }

/* Words on this page. */
.pp-glossary { margin: 0.5rem 0 1.5rem; }
.pp-glossary > div { padding: 0.75rem 0; border-bottom: 1px solid #E2E8F0; }
.pp-glossary dt { font-weight: 700; color: #1E293B; scroll-margin-top: 96px; }
.pp-glossary dd { margin: 0.25rem 0 0; line-height: 1.6; }
.pp-glossary dt:target, .pp-glossary dt:target + dd { background: #FEF3C7; }