/* Portfolio solution summary: same container treatment as .diet-solution-summary
   (pages/diet.css). Weight bars and stat tiles draw entirely from existing theme
   variables (--color-foreground-*, --color-brand-content), so, like Diet, no
   new colors are needed here. The efficient-frontier chart below it needs two
   identity colors (individual stocks vs. frontier/minimum-risk portfolio) that
   Furo has no variable for; steps come from the same validated categorical
   palette used elsewhere on this site (blue = slot 1, aqua = slot 5), the same
   pairing already validated for Facility's plant colors. */
[role="main"] .portfolio-solution-summary {
    padding: 1.2em 1.3em;
    border-radius: 0.6em;
    background: #eef1f5;
    border: 1px solid var(--color-sidebar-background-border);
    --portfolio-stock: #2a78d6;
    --portfolio-frontier: #1baf7a;
}

body[data-theme="dark"] [role="main"] .portfolio-solution-summary {
    background: #15171a;
    --portfolio-stock: #3987e5;
    --portfolio-frontier: #199e70;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .portfolio-solution-summary {
        background: #15171a;
        --portfolio-stock: #3987e5;
        --portfolio-frontier: #199e70;
    }
}

/* Efficient-frontier chart: thin recessive gridlines/axes, hover-revealed
   per-point tooltips (hidden by default, shown on hover/focus of the group). */
[role="main"] .portfolio-solution-summary .pf-grid {
    stroke: var(--color-background-border);
    stroke-width: 1;
}

[role="main"] .portfolio-solution-summary .pf-axis {
    stroke: var(--color-foreground-secondary);
    stroke-width: 1;
}

[role="main"] .portfolio-solution-summary .pf-tick {
    font-size: 11px;
    fill: var(--color-foreground-muted);
}

[role="main"] .portfolio-solution-summary .pf-axis-label {
    font-size: 12px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .portfolio-solution-summary .pf-frontier-line {
    stroke: var(--portfolio-frontier);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[role="main"] .portfolio-solution-summary .pf-stock-dot {
    fill: var(--portfolio-stock);
    stroke: var(--color-background-primary);
    stroke-width: 2;
}

[role="main"] .portfolio-solution-summary .pf-minvar-dot {
    fill: var(--portfolio-frontier);
    stroke: var(--color-background-primary);
    stroke-width: 2;
}

[role="main"] .portfolio-solution-summary .pf-point-label {
    font-size: 11px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .portfolio-solution-summary .pf-tooltip-box {
    fill: var(--color-background-primary);
    stroke: var(--color-background-border);
}

[role="main"] .portfolio-solution-summary .pf-tooltip-title {
    font-size: 11px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
}

[role="main"] .portfolio-solution-summary .pf-tooltip-body {
    font-size: 10px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .portfolio-solution-summary .pf-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

[role="main"] .portfolio-solution-summary .pf-point:hover .pf-tooltip,
[role="main"] .portfolio-solution-summary .pf-point:focus-within .pf-tooltip {
    opacity: 1;
}

[role="main"] .portfolio-solution-summary .pf-point circle:first-child {
    cursor: pointer;
}