/* ============================================================
   powerrating.css — EW2027 "The Power Rating" article
   Companion to library-article.css. Prefix: pw-
   ============================================================ */

.pw-figure,
.pw-stages,
.pw-matrix {
    --pw-accent: var(--ew-color, #DDB785);
    --pw-up: var(--ew-green, var(--ew-brightgreen, #4B8B5B));
    --pw-down: var(--ew-red, #B4534F);
    --pw-ink: var(--text, currentColor);
    --pw-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --pw-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
}

/* ---------- the three stages --------------------------------- */

.pw-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 2rem 0;
}

.pw-stage {
    position: relative;
    border: 1px solid var(--pw-rule, rgba(0, 0, 0, .14));
    border-radius: var(--radius, 10px);
    padding: 1rem 1.1rem;
    background: var(--card-bg, transparent);
}

    /* Stage two is the one this article is about. */
    .pw-stage.is-focus {
        border-color: var(--pw-accent);
        box-shadow: inset 0 0 0 1px var(--pw-accent);
    }

.pw-stage-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 800;
    color: var(--pw-ink-soft);
    border: 1.5px solid var(--pw-rule);
    margin-bottom: .5rem;
}

.pw-stage.is-focus .pw-stage-n {
    color: var(--pw-accent);
    border-color: var(--pw-accent);
}

.pw-stage-title {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: var(--pw-ink);
    margin-bottom: .35rem;
}

.pw-stage-text {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--pw-ink-soft);
}

@media (max-width: 700px) {
    .pw-stages {
        grid-template-columns: 1fr;
    }
}

/* ---------- surprise / sentiment matrix ---------------------- */

.pw-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 2rem 0;
}

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

    .pw-cell.is-best {
        border-left-color: var(--pw-up);
    }

    .pw-cell.is-capped {
        border-left-color: var(--pw-accent);
    }

    .pw-cell.is-worst {
        border-left-color: var(--pw-down);
    }

    .pw-cell.is-priced {
        border-left-color: var(--pw-ink-soft);
    }

.pw-cell-head {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pw-ink-soft);
    margin-bottom: .4rem;
}

.pw-cell-title {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: var(--pw-ink);
    margin-bottom: .35rem;
}

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

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

/* ---------- figures ------------------------------------------ */

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

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

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

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

    .pw-axis.is-dim {
        font-size: 10.5px;
        opacity: .7;
    }

.pw-bar.is-up {
    fill: var(--pw-up);
    fill-opacity: .8;
}

.pw-bar.is-down {
    fill: var(--pw-down);
    fill-opacity: .8;
}

.pw-eq-strat {
    fill: none;
    stroke: var(--pw-ink);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.pw-eq-bench {
    fill: none;
    stroke: var(--pw-ink-soft);
    stroke-width: 2;
    stroke-opacity: .7;
    stroke-linejoin: round;
}

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

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

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

.pw-figure .pw-bar {
    transform-origin: center bottom;
    animation: pwRise .7s cubic-bezier(.33, 0, .2, 1) backwards;
}

.pw-figure .pw-eq-strat {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pwDraw 1.6s cubic-bezier(.33, 0, .2, 1) .2s forwards;
}

@keyframes pwRise {
    from {
        opacity: 0;
        transform: scaleY(.4);
    }
}

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

.pw-key line.pw-eq-strat {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .pw-figure .pw-bar,
    .pw-figure .pw-eq-strat {
        animation: none;
        transform: none;
        opacity: 1;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

/* ---- decile chart: title, date range and hover readout ---- */
.pw-title {
    font-size: 17px;
    font-weight: 800;
    fill: var(--text);
}

.pw-subtitle {
    font-size: 11.5px;
    fill: var(--text-muted);
}

/* A full-height, invisible hit area per bar. Without it the pointer has to land on
   the bar itself, which near zero is only a few pixels tall. */
.pw-hit {
    fill: transparent;
}

.pw-barg {
    cursor: default;
}

    .pw-barg:focus {
        outline: none;
    }

    /* Keyboard users get the same readout, so the numbers are not mouse-only. */
    .pw-barg:focus-visible .pw-hit {
        fill: color-mix(in srgb, var(--text-muted) 10%, transparent);
    }

.pw-tip {
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.pw-barg:hover .pw-tip,
.pw-barg:focus-visible .pw-tip {
    opacity: 1;
}

.pw-tip-bg {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 1;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14));
}

.pw-tip-val {
    font-size: 14px;
    font-weight: 800;
}

.pw-tip-sub {
    font-size: 10px;
    fill: var(--text-muted);
}

/* The bar the pointer is on keeps full strength; the rest step back, so the
   comparison is between the one being read and the shape of the whole. */
.pw-figure:hover .pw-bar {
    opacity: 0.55;
    transition: opacity 0.12s ease;
}

.pw-figure .pw-barg:hover .pw-bar,
.pw-figure .pw-barg:focus-visible .pw-bar {
    opacity: 1;
}

@media (hover: none) {
    /* No pointer: dimming would strand the reader with a permanently faded chart. */
    .pw-figure:hover .pw-bar {
        opacity: 1;
    }
}

/* ---- Power Rating drift curves ---- */
.pw-drift {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    /* Same three colours as the decile ramp's endpoints and middle, so a reader who
       has just looked at that chart recognises the bands without being told. */
    .pw-drift.is-pos {
        stroke: rgb(72, 138, 72);
    }

    .pw-drift.is-neut {
        stroke: rgb(212, 186, 142);
    }

    .pw-drift.is-neg {
        stroke: rgb(176, 62, 57);
    }

.pw-drift-sw.is-pos {
    fill: rgb(72, 138, 72);
}

.pw-drift-sw.is-neut {
    fill: rgb(212, 186, 142);
}

.pw-drift-sw.is-neg {
    fill: rgb(176, 62, 57);
}

/* The end value sits at the end of its own line, so colour never has to be matched
   against a legend to read the number. */
.pw-drift-end {
    font-size: 13px;
    font-weight: 800;
}

    .pw-drift-end.is-pos {
        fill: rgb(72, 138, 72);
    }

    .pw-drift-end.is-neut {
        fill: rgb(170, 140, 90);
    }

    .pw-drift-end.is-neg {
        fill: rgb(176, 62, 57);
    }

.pw-legend {
    font-size: 12.5px;
    font-weight: 700;
    fill: var(--text);
}

@media (max-width: 560px) {
    /* Three legend entries across do not fit; the end-of-line values carry the
       identification on their own. */
    .pw-legend {
        font-size: 11px;
    }
}

/* ---- four-up stats row ----
   library-article.css defines lib-stats-3; the portfolio box carries four figures so
   the row fills rather than leaving a gap where the benchmark sits. Declared here
   because this is the stylesheet the page loads, and adding it to the shared article
   CSS would change every article that uses lib-stats. */
.lib-stats.lib-stats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .lib-stats.lib-stats-4 {
        /* Four across is unreadable on a phone; two rows of two keeps each figure
           next to its own label. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }
}