/* ============================================================
   lifecycle.css — EW2027 "Earnings Expectation Life Cycle"
   Companion to library-article.css. Prefix: lc-
   (sc- = Scores, scr- = screens, sp- = stock page,
    qtr- = the quarter, pd- = PEAD)
   ============================================================ */

.lc-figure,
.lc-wheel {
    --lc-accent: var(--ew-color, #DDB785);
    --lc-up: var(--ew-green, var(--ew-brightgreen, #4B8B5B));
    --lc-blue: var(--ew-blue, #3D6E9C);
    /* Forward estimates moved off gold so the accent is free to carry the
       Value Trap phase shading without the two reading as one band. */
    --lc-est: var(--ew-purple, #7C5CB8);
    --lc-down: var(--ew-red, #B4534F);
    --lc-ink: var(--text, currentColor);
    --lc-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --lc-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
}

/* ---------- case-study charts -------------------------------- */

.lc-figure {
    margin: 2rem 0 2.5rem;
}

.lc-price {
    fill: none;
    stroke: var(--lc-ink);
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lc-est-area {
    fill: var(--lc-est);
    fill-opacity: 0.16;
    stroke: none;
}

.lc-est-line {
    fill: none;
    stroke: var(--lc-est);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* ---------- life cycle phase shading ------------------------- */

.lc-band-fill {
    fill: currentColor;
    fill-opacity: 0.10;
}

.lc-band-edge {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    stroke-opacity: 0.7;
}

.lc-band-label {
    fill: currentColor;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
}

/* Colors match the wheel quadrants. */
.lc-band-trap {
    color: var(--lc-accent);
}

.lc-band-pos {
    color: var(--lc-up);
}

.lc-band-momo {
    color: var(--lc-blue);
}

.lc-band-neg {
    color: var(--lc-down);
}

:root[data-theme="dark"] .lc-band-fill {
    fill-opacity: 0.16;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lc-band-fill {
        fill-opacity: 0.16;
    }
}

.lc-sent {
    fill: none;
    stroke: var(--lc-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lc-axis-line {
    stroke: var(--lc-rule);
    stroke-width: 1.25;
}

.lc-zero {
    stroke: var(--lc-ink-soft);
    stroke-width: 1;
    stroke-opacity: 0.6;
}

.lc-axis {
    fill: var(--lc-ink-soft);
    font-size: 12px;
}

.lc-key text {
    fill: var(--lc-ink-soft);
    font-size: 11.5px;
}

.lc-key line {
    stroke-width: 2.5;
}

.lc-mark-up path {
    fill: var(--lc-up);
}

.lc-mark-down path {
    fill: var(--lc-down);
}

.lc-note-lead {
    stroke: var(--lc-down);
    stroke-width: 1.25;
    stroke-opacity: 0.75;
}

.lc-note-dot {
    fill: none;
    stroke: var(--lc-down);
    stroke-width: 2;
}

.lc-note-text {
    fill: var(--lc-down);
    font-size: 12px;
    font-weight: 700;
}

.lc-figure figcaption {
    margin-top: 1rem;
}

.lc-fig-phase {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lc-accent);
    margin-bottom: .35rem;
}

.lc-fig-note {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
    font-style: italic;
    opacity: .85;
}

/* ---------- the life cycle wheel -----------------------------
   Quadrant layout follows the site convention: the LEFT half is
   estimates rising, the RIGHT half is estimates falling, the BOTTOM
   half is bearish sentiment and the TOP half is bullish. That puts
   the Positive Surprise phase at bottom left with the Value Trap
   directly to its right, and the cycle turns clockwise.
   ------------------------------------------------------------- */

.lc-wheel {
    margin: 2rem auto 1rem;
    max-width: 540px;
}

    .lc-wheel svg {
        width: 100%;
        height: auto;
        display: block;
    }

.lc-wheel-note {
    max-width: 540px;
    margin: 0 auto 2.5rem !important;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
}

.lc-w-cell {
    stroke: var(--card-bg, #fff);
    stroke-width: 2;
}

/* Earnings Momentum is blue, as on the EW2023 wheel — it reads as the
   established trend rather than another shade of the improving-estimates
   green next to it. Value Trap keeps its gold from the same wheel. */
.lc-w-momo {
    fill: var(--lc-blue);
    fill-opacity: 0.30;
}

.lc-w-pos {
    fill: var(--lc-up);
    fill-opacity: 0.15;
}

.lc-w-trap {
    fill: var(--lc-accent);
    fill-opacity: 0.30;
}

.lc-w-neg {
    fill: var(--lc-down);
    fill-opacity: 0.26;
}

/* ---- dark mode -------------------------------------------------
   Low-opacity fills that read cleanly on white all collapse toward the
   same muddy grey on anthracite, which is exactly wrong here: the whole
   point of the wheel is telling four quadrants apart at a glance. In
   dark mode the wedges get brighter base hues AND more opacity, and the
   separating stroke is lifted so the boundaries stay crisp.
   Both selectors mirror how ew-theme.css activates dark mode. */

:root[data-theme="dark"] .lc-wheel,
:root[data-theme="dark"] .lc-figure {
    --lc-blue: var(--ew-blue-light, #6BA3D6);
    --lc-up: var(--ew-brightgreen, #56C07E);
    --lc-down: var(--ew-red, #E4726E);
    --lc-accent: var(--ew-color, #DDB785);
    --lc-est: var(--ew-purple-light, #A98CE0);
}

:root[data-theme="dark"] .lc-w-cell {
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 2.5;
}

:root[data-theme="dark"] .lc-w-momo {
    fill-opacity: 0.58;
}

:root[data-theme="dark"] .lc-w-pos {
    fill-opacity: 0.34;
}

:root[data-theme="dark"] .lc-w-trap {
    fill-opacity: 0.46;
}

:root[data-theme="dark"] .lc-w-neg {
    fill-opacity: 0.48;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lc-wheel,
    :root:not([data-theme="light"]) .lc-figure {
        --lc-blue: var(--ew-blue-light, #6BA3D6);
        --lc-up: var(--ew-brightgreen, #56C07E);
        --lc-down: var(--ew-red, #E4726E);
        --lc-accent: var(--ew-color, #DDB785);
        --lc-est: var(--ew-purple-light, #A98CE0);
    }

    :root:not([data-theme="light"]) .lc-w-cell {
        stroke: rgba(255, 255, 255, 0.14);
        stroke-width: 2.5;
    }

    :root:not([data-theme="light"]) .lc-w-momo {
        fill-opacity: 0.58;
    }

    :root:not([data-theme="light"]) .lc-w-pos {
        fill-opacity: 0.34;
    }

    :root:not([data-theme="light"]) .lc-w-trap {
        fill-opacity: 0.46;
    }

    :root:not([data-theme="light"]) .lc-w-neg {
        fill-opacity: 0.48;
    }
}

.lc-w-axis-line {
    stroke: var(--lc-rule);
    stroke-width: 1.5;
    stroke-opacity: .8;
}

.lc-w-title {
    fill: var(--lc-ink);
    font-size: 15px;
    font-weight: 800;
}

/* The labels sit on top of the wedges, so they need a little separation
   once the fills are carrying real saturation. */
:root[data-theme="dark"] .lc-w-title,
:root[data-theme="dark"] .lc-w-sub {
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 3px;
    stroke-linejoin: round;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lc-w-title,
    :root:not([data-theme="light"]) .lc-w-sub {
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.55);
        stroke-width: 3px;
        stroke-linejoin: round;
    }
}

.lc-w-sub {
    fill: var(--lc-ink-soft);
    font-size: 11.5px;
}

.lc-w-axis {
    fill: var(--lc-ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
}

.lc-w-flow path {
    fill: none;
    stroke: var(--lc-ink-soft);
    stroke-width: 2;
    stroke-opacity: .55;
    stroke-linecap: round;
}

.lc-w-flow .lc-w-head {
    fill: var(--lc-ink-soft);
    fill-opacity: .55;
    stroke: none;
}

/* ---------- phase summary cards ------------------------------ */

.lc-phases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 2rem 0;
}

.lc-phase {
    border: 1px solid var(--lc-rule, rgba(0, 0, 0, .14));
    border-left: 4px solid var(--lc-rule, rgba(0, 0, 0, .14));
    border-radius: var(--radius, 10px);
    padding: 1rem 1.15rem;
    background: var(--card-bg, transparent);
}

    .lc-phase.is-trap {
        border-left-color: var(--lc-down);
    }

    .lc-phase.is-pos {
        border-left-color: var(--lc-up);
    }

    .lc-phase.is-momo {
        border-left-color: var(--lc-blue);
    }

    .lc-phase.is-neg {
        border-left-color: var(--lc-accent);
    }

.lc-phase-n {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lc-ink-soft);
    margin-bottom: .3rem;
}

.lc-phase-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lc-ink);
    margin-bottom: .35rem;
}

.lc-phase-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--lc-ink-soft);
}

@media (max-width: 620px) {
    .lc-phases {
        grid-template-columns: 1fr;
    }
}

/* ---------- the reveal --------------------------------------- */

.lc-figure .lc-price,
.lc-figure .lc-sent {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: lcDraw 1.4s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.lc-figure .lc-sent {
    animation-delay: .3s;
}

/* Key swatches share the line classes and must not animate. */
.lc-key line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

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

@media (prefers-reduced-motion: reduce) {
    .lc-figure .lc-price,
    .lc-figure .lc-sent {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
}

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

.hl-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
    margin: 1.5rem 0 .5rem;
}

.hl-wheel {
    margin: 0;
    max-width: 340px;
}

.hl-phases {
    display: grid;
    gap: 10px;
}

    .hl-phases .lc-phase {
        padding: .7rem .9rem;
    }

    .hl-phases .lc-phase-title {
        font-size: .92rem;
        margin-bottom: .2rem;
    }

    .hl-phases .lc-phase-text {
        font-size: .82rem;
        line-height: 1.45;
    }

.hl-cap {
    margin: .75rem 0 1rem;
    font-size: .84rem;
    color: var(--text-muted);
}

/* Stack the wheel above the phase cards once the two columns get cramped. */
@media (max-width: 860px) {
    .hl-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .hl-wheel {
        max-width: 320px;
        margin: 0 auto;
    }
}