/* ============================================================
   library-article.css — EW2027 long-form library articles
   Shared by /about-score, /about-whispers, /about-grade,
   /about-thequarter and siblings.

   Extracted from the duplicated <style> blocks in
   ScoringExpectations.cshtml and WhisperNumbers.cshtml, which both
   carried a note saying these rules belonged in a shared sheet.
   Delete those inline blocks once this file is linked.

   Changes made during extraction:
     - @@media unescaped back to @media (Razor escaping is not needed
       in a real stylesheet)
     - .lib-stat-good / .lib-stat-bad added as aliases of
       .lib-stat-plus5 / .lib-stat-minus5 — the two views had
       diverged on the naming
     - h3, ul/ol/li and body-link rules added; no existing page used
       them, but AboutQuarter.cshtml does
     - .lib-stats-3 modifier for three-column stat panels

   Scope note: library.css owns the card grid (.lib-page, .lib-grid,
   .lib-card, .lib-title, .lib-subtitle, .lib-icon). Nothing here
   redefines those.
   ============================================================ */

.lib-article {
    --lib-accent: var(--nav-active, #F1B82D);
    --lib-ink: var(--text, inherit);
    --lib-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --lib-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
    /* Gold on a light background fails contrast, so links carry the body
       text color and use the accent as an underline instead. Dark mode has
       the headroom for gold text and overrides this below. */
    --lib-link: var(--lib-ink);
    max-width: 70ch;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    color: var(--lib-ink);
    line-height: 1.65;
}

    .lib-article .lib-eyebrow {
        display: flex;
        align-items: baseline;
        gap: .75rem;
        font-size: .8rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lib-ink-soft);
        margin-bottom: 1rem;
    }

        .lib-article .lib-eyebrow a {
            color: var(--lib-link);
            text-decoration: none;
        }

            .lib-article .lib-eyebrow a:hover,
            .lib-article .lib-eyebrow a:focus-visible {
                text-decoration: underline;
            }

    .lib-article h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.15;
        margin: 0 0 .5rem;
    }

    .lib-article .lib-lede {
        font-size: 1.15rem;
        color: var(--lib-ink-soft);
        margin: 0 0 2rem;
    }

    .lib-article h2 {
        font-size: 1.35rem;
        margin: 2.5rem 0 .75rem;
        line-height: 1.25;
    }

    /* New: no existing library page used h3. */
    .lib-article h3 {
        font-size: 1.08rem;
        margin: 1.75rem 0 .5rem;
        line-height: 1.3;
    }

    .lib-article p {
        margin: 0 0 1rem;
    }

    /* New: body lists and links. */
    .lib-article ul,
    .lib-article ol {
        margin: 0 0 1.25rem;
        padding-left: 1.25rem;
    }

    .lib-article li {
        margin-bottom: .4rem;
    }

    .lib-article ul li::marker {
        color: var(--lib-accent);
    }

    .lib-article p a,
    .lib-article li a {
        color: var(--lib-link);
        text-decoration: underline;
        text-decoration-color: var(--lib-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: color 140ms ease;
    }

        .lib-article p a:hover,
        .lib-article li a:hover,
        .lib-article p a:focus-visible,
        .lib-article li a:focus-visible {
            color: var(--lib-accent);
        }

/* Dark mode has the contrast headroom for gold link text. Both selectors
   mirror how ew-theme.css activates dark mode. */
:root[data-theme="dark"] .lib-article {
    --lib-link: var(--ew-color);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lib-article {
        --lib-link: var(--ew-color);
    }
}

.lib-article .lib-question {
    font-weight: 600;
    border-left: 3px solid var(--lib-accent);
    padding-left: .9rem;
    margin: 1.25rem 0;
}

/* Headline result panel.
   Theme-INVARIANT blackout helmet (like --nav-bg): values pinned from
   the [data-theme="dark"] box tokens so light mode's silver never
   applies. Light text below is safe because the panel is always dark. */
.lib-stats {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 2rem 0;
    text-align: center;
    background: radial-gradient(140% 110% at 30% -20%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 75%), linear-gradient(180deg, #16181C 0%, #0E0F12 100%);
    border: 1px solid #23262C;
    border-radius: var(--radius, 10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

    /* New: three-up variant. */
    .lib-stats.lib-stats-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sheen overlay above the cells so the key light reads as falling
       across the whole panel (same trick as .helmet-panel::after). */
    .lib-stats::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(120% 90% at 25% -10%, rgba(255, 255, 255, 0.055) 0%, transparent 65%);
    }

    .lib-stats > div {
        padding: 1.1rem .5rem 1rem;
    }

        .lib-stats > div + div {
            border-left: 1px solid var(--box-divider);
        }

    .lib-stats .lib-stat-value {
        display: block;
        font-size: clamp(1.5rem, 3.5vw, 2rem);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--ew-color);
    }

    /* .lib-stat-good / .lib-stat-bad are aliases; the two source views
       had diverged on naming. Both sets are kept so neither breaks. */
    .lib-stats .lib-stat-plus5 .lib-stat-value,
    .lib-stats .lib-stat-good .lib-stat-value {
        color: var(--ew-brightgreen);
    }

    .lib-stats .lib-stat-minus5 .lib-stat-value,
    .lib-stats .lib-stat-bad .lib-stat-value {
        color: var(--ew-red);
    }

    .lib-stats .lib-stat-label {
        display: block;
        margin-top: .35rem;
        font-size: .78rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--box-sub);
    }

.lib-stats-caption {
    font-size: .85rem;
    color: var(--lib-ink-soft);
    margin-top: -1.25rem;
    margin-bottom: 2rem;
    text-align: center;
}

.lib-chart {
    margin: 0 0 2.5rem;
}

    /* Watermark: wm.svg has dark fills, so invert it to a neutral light
       mark in dark mode. grayscale first so any hue inverts to plain
       white rather than its color complement. Both selectors mirror how
       ew-theme.css activates dark mode. */
    .lib-chart .lib-wm {
        opacity: .95;
    }

:root[data-theme="dark"] .lib-chart .lib-wm {
    filter: grayscale(1) invert(1);
    opacity: .95;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lib-chart .lib-wm {
        filter: grayscale(1) invert(1);
        opacity: .95;
    }
}

.lib-example {
    border: 1px solid var(--lib-rule);
    border-radius: .5rem;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: .95rem;
}

    .lib-example .lib-example-tag {
        font-size: .75rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lib-accent);
        display: block;
        margin-bottom: .4rem;
    }

.lib-disclosure {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lib-rule);
    font-size: .82rem;
    color: var(--lib-ink-soft);
}

@media (max-width: 640px) {
    .lib-stats,
    .lib-stats.lib-stats-3 {
        grid-template-columns: repeat(2, 1fr);
    }

        .lib-stats > div:nth-child(3) {
            border-left: none;
        }

        .lib-stats > div:nth-child(n+3) {
            border-top: 1px solid var(--box-divider);
        }
}

@media (max-width: 400px) {
    .lib-stats,
    .lib-stats.lib-stats-3 {
        grid-template-columns: 1fr;
    }

        .lib-stats > div + div {
            border-left: none;
            border-top: 1px solid var(--box-divider);
        }
}