/* ============================================================
   pead.css — EW2027 "Post-Earnings Announcement Drift" article
   Companion to library-article.css. Prefix: pd-
   (sc- = Scores, scr- = screens, sp- = stock page, qtr- = the quarter)

   The chart is server-rendered inline SVG, so the reveal is CSS-only —
   no IntersectionObserver, no JS module. It plays on load rather than
   on scroll, which is fine: the figure sits high in the article.
   ============================================================ */

.pd-figure {
    --pd-accent: var(--ew-color, #DDB785);
    --pd-up: var(--ew-green, var(--ew-brightgreen, #4B8B5B));
    --pd-down: var(--ew-red, #B4534F);
    --pd-ink: var(--text, currentColor);
    --pd-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --pd-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
    --pd-neutral: #8A9099;
    margin: 2rem 0 2.5rem;
}

/* ---------- chart marks -------------------------------------- */

.pd-grid {
    stroke: var(--pd-rule);
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.pd-zero {
    stroke: var(--pd-ink-soft);
    stroke-width: 1.25;
    stroke-opacity: 0.7;
}

.pd-axis {
    fill: var(--pd-ink-soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pd-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pd-line-beat {
    stroke: var(--pd-up);
    stroke-width: 3;
}

.pd-line-mid {
    stroke: var(--pd-neutral);
}

.pd-line-miss {
    stroke: var(--pd-down);
}

.pd-legend text {
    fill: var(--pd-ink-soft);
    font-size: 12px;
}

.pd-legend line {
    stroke-width: 3;
}

/* ---------- the reveal --------------------------------------- */
/* pathLength="1" on each polyline lets the dash animation run without
   measuring the geometry. The miss line draws first, then the middle,
   then the beat line, so the eye finishes on the result that matters. */

.pd-figure .pd-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pdDraw 1.1s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.pd-figure .pd-line-miss {
    animation-delay: 0.15s;
}

.pd-figure .pd-line-mid {
    animation-delay: 0.35s;
}

.pd-figure .pd-line-beat {
    animation-delay: 0.55s;
}

/* Legend swatches are the same classes; they must not animate. */
.pd-legend line.pd-line-beat,
.pd-legend line.pd-line-mid,
.pd-legend line.pd-line-miss {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

@keyframes pdDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-figure .pd-line {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
}

/* ============================================================
   Home feature-slot promo (_HomePead.cshtml)
   Structural styling is inherited from .hs-score; only the
   deltas live here.
   ============================================================ */

/* Three stats, not the four .hs-score-stats expects. */
.hp-stats {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .hp-stats {
        grid-template-columns: 1fr;
    }
}

/* The promo card runs the full feature-slot width, which stretches a
   five-point chart into something that reads as empty. Cap it and center. */
.hp-figure {
    max-width: 760px;
    margin: 1.5rem auto .5rem;
}

@media (max-width: 680px) {
    .hp-figure {
        max-width: none;
    }
}

.hp-cap {
    margin: .6rem 0 1rem;
    text-align: center;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--pd-ink-soft);
}