/**
 * Concepts — the [Concept] shortcode's animated illustrations.
 *
 * Self-contained on purpose. A concept page need not carry a chart, so nothing
 * here depends on portfolio-charts.css; the card and footer rules restate the
 * chart look rather than inheriting it. Keep the two in step by eye, not by
 * selector sharing.
 *
 * This file also owns the ambient animation. Every keyframe here runs without
 * JavaScript, so a scene still breathes where scripts are blocked or fail, and
 * all of it stops under prefers-reduced-motion.
 */

/* ── Card ──────────────────────────────────────────────────────────── */

.portfoliocharts-concept {
    margin: 32px auto;
    max-width: 840px;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Source Sans 3', sans-serif;
    color: #25282c;
}

.portfoliocharts-concept-scene svg {
    display: block;
    width: 100%;
    height: auto;
}

/* SVG labels. Sized in user units, so they scale with the viewBox. */
.portfoliocharts-concept-label {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #25282c;
}

.portfoliocharts-concept-sublabel {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    fill: #5a6463;
}

/* The reservoir's fully funded line. */
.portfoliocharts-concept-target {
    stroke: #25282c;
    stroke-opacity: 0.55;
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

/* ── Controls ──────────────────────────────────────────────────────── */

.portfoliocharts-concept-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 14px 32px;
    background: #f1f2f3;
    font-size: 15px;
}

.portfoliocharts-concept-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* inline-flex would otherwise beat the hidden attribute's display: none. */
.portfoliocharts-concept-field[hidden] {
    display: none;
}

.portfoliocharts-concept-field label {
    font-weight: 700;
    color: #464d4d;
}

.portfoliocharts-concept-controls input[type="range"] {
    width: 150px;
    max-width: 40vw;
    accent-color: #e06d5e;
}

.portfoliocharts-concept-value,
.portfoliocharts-concept-readout {
    color: #5a6463;
    white-space: nowrap;
}

.portfoliocharts-concept-value b,
.portfoliocharts-concept-readout b {
    color: #25282c;
    font-weight: 700;
}

.portfoliocharts-concept-readout {
    margin-left: auto;
}

.portfoliocharts-concept-button {
    font: inherit;
    font-weight: 700;
    padding: 6px 14px;
    border: 0;
    border-radius: 4px;
    background: #464d4d;
    color: #fff;
    cursor: pointer;
}

.portfoliocharts-concept-button[aria-pressed="false"],
.portfoliocharts-concept-button-quiet {
    background: #7f8d8c;
}

.portfoliocharts-concept-button:focus-visible,
.portfoliocharts-concept-controls input[type="range"]:focus-visible {
    outline: 2px solid #e06d5e;
    outline-offset: 2px;
}

/* ── Caption ───────────────────────────────────────────────────────── */

.portfoliocharts-concept-caption {
    margin: 0;
    padding: 14px 32px;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6463;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.portfoliocharts-concept-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    padding: 10px 32px;
    border-top: 1px solid #ddd;
}

.portfoliocharts-concept-footer-right {
    margin-left: auto;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

/* ── Ambient animation (CSS only — runs with no JavaScript) ────────── */

.portfoliocharts-concept-flow {
    fill: none;
    stroke: #fff;
    stroke-opacity: 0.55;
    stroke-linecap: round;
    stroke-dasharray: 6 14;
    animation: portfoliocharts-concept-dash 1.1s linear infinite;
}

@keyframes portfoliocharts-concept-dash {
    to { stroke-dashoffset: -20; }
}

/* The wave path spans two periods, so shifting it by exactly one period
   returns it to an identical shape and the loop has no visible seam. */
.portfoliocharts-concept-wave {
    animation: portfoliocharts-concept-wave 4s linear infinite;
}

@keyframes portfoliocharts-concept-wave {
    to { transform: translateX(-80px); }
}

.portfoliocharts-concept-drop {
    stroke: #6fa8b8;
    stroke-width: 2;
    stroke-linecap: round;
    animation: portfoliocharts-concept-rain 1.4s linear infinite;
}

@keyframes portfoliocharts-concept-rain {
    0%   { transform: translateY(0);     opacity: 0; }
    15%  { opacity: 0.9; }
    85%  { opacity: 0.9; }
    100% { transform: translateY(120px); opacity: 0; }
}

/* A finished scene. The module adds this class when its story ends, so the
   ambient motion pauses along with the simulation until Reset. */
.portfoliocharts-concept-stopped .portfoliocharts-concept-flow,
.portfoliocharts-concept-stopped .portfoliocharts-concept-wave,
.portfoliocharts-concept-stopped .portfoliocharts-concept-drop {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .portfoliocharts-concept-flow,
    .portfoliocharts-concept-wave,
    .portfoliocharts-concept-drop {
        animation: none;
    }
}

/* ── The withdrawal rates chart look ───────────────────────────────── */

/* The withdrawal-rates concept restates the Withdrawal Rates chart's own
   styling (portfolio-charts.css's .grid, .axis and axis-label rules) so a
   concept page needs none of the chart stylesheet. Keep in step by eye.
   The sdi-backtesting concept draws the Portfolio Growth chart, which
   shares the same grid, axis and axis-label rules, so it rides along. */
.portfoliocharts-concept-wr-grid line,
.portfoliocharts-concept-sdi-grid line {
    stroke: #e8e8e8;
    stroke-width: 0.5;
}

.portfoliocharts-concept-wr-axis text,
.portfoliocharts-concept-sdi-axis text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    fill: #666;
}

.portfoliocharts-concept-wr-axis-label,
.portfoliocharts-concept-sdi-axis-label {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #666;
}

/* The white-on-colour tags: the LTWR label and the callouts. */
.portfoliocharts-concept-wr-tag {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    font-weight: 700;
    fill: #fff;
}

.portfoliocharts-concept-wr-legend-title,
.portfoliocharts-concept-sdi-legend-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 700;
    fill: #666;
}

.portfoliocharts-concept-wr-legend-sub {
    font-size: 12px;
    font-weight: 400;
    fill: #6b7280;
}

.portfoliocharts-concept-wr-legend-desc,
.portfoliocharts-concept-sdi-legend-desc {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    fill: #6b7280;
}

/* One blue line per start year, created by the module. The chart draws
   them at half opacity; the module holds a line at full while it draws. */
.portfoliocharts-concept-wr-scenario {
    fill: none;
    stroke-width: 3;
}

.portfoliocharts-concept-wr-projected {
    stroke-dasharray: 3, 3;
}

/* ── The SDI backtesting chart look ────────────────────────────────── */

/* The Portfolio Growth chart's "Thousands" tag above the y-axis labels. */
.portfoliocharts-concept-sdi-unit {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    font-weight: 400;
    fill: #767676;
}

/* One line per start year, created by the module. The chart draws them
   at 0.8 opacity; the module holds a line at full while it draws. */
.portfoliocharts-concept-sdi-path {
    fill: none;
    stroke-width: 3;
}

/* The white-on-colour pills: the goal label and the crossover years. */
.portfoliocharts-concept-sdi-goal-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    fill: #fff;
}

.portfoliocharts-concept-sdi-cross-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: #fff;
}

/* The phase readout is a sentence, not a value: dark, and free to wrap. */
.portfoliocharts-concept-readout-phase {
    color: #25282c;
    white-space: normal;
}

/* ── Narrow columns ────────────────────────────────────────────────── */

@media (max-width: 600px) {
    /* The scene scales with its viewBox, so a phone-width column renders a
       15-unit label at about 6 real pixels. Bump the type in user units so it
       survives the shrink; the scene has room, the reader does not. */
    .portfoliocharts-concept-label {
        font-size: 26px;
    }

    .portfoliocharts-concept-sublabel {
        font-size: 21px;
    }

    .portfoliocharts-concept-controls,
    .portfoliocharts-concept-caption,
    .portfoliocharts-concept-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .portfoliocharts-concept-readout {
        margin-left: 0;
    }
}