/* ============================================================
   quarter.css - EW2027 "The Earnings Quarter" library article
   Companion to library-article.css. Prefix: qtr-
   (sc- = Scores, scr- = screens, sp- = stock page)
   ============================================================ */

/* ---------- local tokens -------------------------------------
   Mapped to the EW2027 palette with fallbacks, so a renamed theme
   token degrades to a sane literal instead of an invalid var (which
   would silently drop the whole declaration).

   Gold is --ew-color, matching the article typography and .lib-stat-value
   rather than the brighter --nav-active used for nav state.
   Chart strokes use --ew-green, following _HomeScore.cshtml; the
   --ew-brightgreen fallback is what library-article.css uses for text.
   ------------------------------------------------------------- */

.qtr-chart,
.qtr-chart-scroll,
.qtr-matrix-wrap,
.qtr-links {
    --qtr-accent: var(--ew-color, #DDB785);
    --qtr-up: var(--ew-green, var(--ew-brightgreen, #4B8B5B));
    --qtr-down: var(--ew-red, #B4534F);
    --qtr-ink: var(--text, currentColor);
    --qtr-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --qtr-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
    --qtr-panel: var(--card-bg, var(--surface, transparent));
}

/* ---------- chart shell -------------------------------------- */

/* The article column is 70ch for readability, which is right for prose and
   far too narrow for this chart. Break the figure out and center it on the
   viewport instead. Requires no ancestor to have overflow-x: hidden. */
.qtr-figure {
    margin: 2.25rem 0 2rem;
}

    .qtr-figure.qtr-bleed {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(1180px, calc(100vw - 3rem));
        max-width: none;
    }

@media (max-width: 700px) {
    .qtr-figure.qtr-bleed {
        width: calc(100vw - 2rem);
    }
}

/* Caption returns to the reading measure even though the figure is wider. */
.qtr-bleed figcaption {
    max-width: 70ch;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.qtr-chart-scroll {
    border: 1px solid var(--qtr-rule);
    border-radius: 16px;
    background: var(--qtr-panel);
    padding: 0.75rem 0.75rem 0.25rem;
}

/* No horizontal scroll: the compact preset reflows instead of overflowing. */
.qtr-chart {
    display: block;
    width: 100%;
}

.qtr-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
    overflow: visible;
}

.qtr-chart-loading {
    min-height: 300px;
    border-radius: 12px;
    background: linear-gradient( 100deg, var(--qtr-panel) 20%, var(--qtr-rule) 40%, var(--qtr-panel) 60% );
    background-size: 220% 100%;
    animation: qtrShimmer 1.4s linear infinite;
}

.qtr-chart-empty {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--qtr-ink-soft);
    font-size: 0.9rem;
}

@keyframes qtrShimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* ---------- compact preset ----------------------------------- */

.qtr-svg.is-compact .qtr-example-tag {
    fill: var(--qtr-ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    opacity: 0.85;
}

.qtr-svg.is-compact .qtr-example-tag {
    font-size: 12px;
}

.qtr-band-label {
    font-size: 13px;
    letter-spacing: 0.04em;
}

.qtr-svg.is-compact .qtr-axis-label,
.qtr-svg.is-compact .qtr-axis-caption {
    font-size: 13px;
}

.qtr-svg.is-compact .qtr-event-label {
    font-size: 14px;
}

.qtr-svg.is-compact .qtr-note {
    font-size: 14px;
}

.qtr-svg.is-compact .qtr-line {
    stroke-width: 3.25;
}

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

.qtr-band {
    fill: var(--qtr-ink);
    fill-opacity: 0.045;
}

.qtr-band-alt {
    fill-opacity: 0.02;
}

.qtr-band-eap {
    fill: var(--qtr-accent);
    fill-opacity: 0.10;
}

.qtr-example-tag {
    fill: var(--qtr-ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    opacity: 0.85;
}

.qtr-svg.is-compact .qtr-example-tag {
    font-size: 12px;
}

.qtr-band-label {
    fill: var(--qtr-ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

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

.qtr-baseline {
    stroke: var(--qtr-ink-soft);
    stroke-width: 1.5;
    stroke-opacity: 0.7;
}

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

.qtr-axis-caption {
    fill: var(--qtr-ink-soft);
    font-size: 11px;
    font-style: italic;
}

.qtr-line {
    stroke: var(--qtr-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qtr-area {
    stroke: none;
}

.qtr-stop-up-0 {
    stop-color: var(--qtr-accent);
    stop-opacity: 0.22;
}

.qtr-stop-up-1 {
    stop-color: var(--qtr-accent);
    stop-opacity: 0;
}

.qtr-stop-dn-0 {
    stop-color: var(--qtr-down);
    stop-opacity: 0.20;
}

.qtr-stop-dn-1 {
    stop-color: var(--qtr-down);
    stop-opacity: 0;
}

.qtr-event-line {
    stroke: var(--qtr-accent);
    stroke-width: 1.75;
    stroke-opacity: 0.42;
}

.qtr-dot {
    fill: var(--qtr-accent);
    stroke: var(--qtr-panel);
    stroke-width: 1.5;
}

.qtr-dot-muted {
    fill: var(--qtr-ink-soft);
    stroke: none;
}

.qtr-gap-line {
    stroke: var(--qtr-ink);
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
    stroke-opacity: 0.75;
}

.qtr-note {
    fill: var(--qtr-ink);
    font-size: 11.5px;
    font-weight: 700;
}

.qtr-drift-line {
    stroke: var(--qtr-up);
    stroke-width: 2;
    stroke-dasharray: 7 6;
    fill: none;
}

    .qtr-drift-line.is-down {
        stroke: var(--qtr-down);
    }

.qtr-drift-label {
    fill: var(--qtr-up);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

    .qtr-drift-label.is-down {
        fill: var(--qtr-down);
    }

.qtr-rail-line {
    stroke: var(--qtr-rule);
    stroke-width: 2;
    fill: none;
}

.qtr-rail-tick {
    stroke: var(--qtr-rule);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.qtr-rail-dot {
    fill: var(--qtr-panel);
    stroke: var(--qtr-ink-soft);
    stroke-width: 2;
}

    .qtr-rail-dot.is-major {
        fill: var(--qtr-accent);
        stroke: var(--qtr-accent);
    }

.qtr-event-label {
    fill: var(--qtr-ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

    .qtr-event-label.is-major {
        fill: var(--qtr-ink);
        font-weight: 800;
    }

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

/* Cross-fade between loop cycles, so the chart dissolves rather than
   blinking every element back to zero at once. FADEOUT_MS in
   ew-quarter-chart.js must match this duration. */
.qtr-chart .qtr-svg {
    transition: opacity 420ms ease;
}

.qtr-chart.is-resetting .qtr-svg {
    opacity: 0;
}

.qtr-fade {
    opacity: 0;
}

.qtr-chart .qtr-line,
.qtr-chart .qtr-drift-line,
.qtr-chart .qtr-rail-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.qtr-chart .qtr-drift-line {
    stroke-dasharray: 0.02 0.017;
    stroke-dashoffset: 1;
}

.qtr-chart.is-playing .qtr-fade {
    animation: qtrFadeIn 0.55s ease-out both;
    animation-delay: var(--d, 0s);
}

.qtr-chart.is-playing .qtr-line {
    animation: qtrDraw 1.5s cubic-bezier(0.33, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
}

.qtr-chart.is-playing .qtr-rail-line {
    animation: qtrDraw 0.7s ease-out forwards;
    animation-delay: var(--d, 1.55s);
}

.qtr-chart.is-playing .qtr-drift-line {
    animation: qtrDraw 0.9s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes qtrFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .qtr-chart .qtr-fade,
    .qtr-chart.is-playing .qtr-fade {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .qtr-chart .qtr-line,
    .qtr-chart .qtr-rail-line,
    .qtr-chart .qtr-drift-line,
    .qtr-chart.is-playing .qtr-line,
    .qtr-chart.is-playing .qtr-rail-line,
    .qtr-chart.is-playing .qtr-drift-line {
        animation: none;
        stroke-dashoffset: 0;
    }

    .qtr-chart .qtr-drift-line {
        stroke-dasharray: 0.02 0.017;
    }

    .qtr-chart .qtr-line,
    .qtr-chart .qtr-rail-line {
        stroke-dasharray: none;
    }

    .qtr-chart-loading {
        animation: none;
    }

    /* No loop, no cross-fade: the reveal is skipped entirely and the
       chart renders at its final frame. */
    .qtr-chart .qtr-svg,
    .qtr-chart.is-resetting .qtr-svg {
        transition: none;
        opacity: 1;
    }
}

/* ---------- results / sentiment matrix ----------------------- */

.qtr-matrix-wrap {
    margin: 2rem 0;
}

.qtr-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.qtr-cell {
    position: relative;
    overflow: hidden;
    background: var(--qtr-panel, transparent);
    border: 1px solid var(--qtr-rule, rgba(0, 0, 0, 0.14));
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--qtr-rule, rgba(0, 0, 0, 0.14));
    border-radius: var(--radius, 10px);
    padding: 1.1rem 1.25rem;
}

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

    .qtr-cell.is-good {
        border-left-color: var(--qtr-accent);
    }

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

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

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

.qtr-cell-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--qtr-ink);
    margin-bottom: .4rem;
}

.qtr-cell-text {
    margin: 0;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--qtr-ink-soft);
}

/* Blackout helmet in dark mode only — same gradient stack and sheen as
   .lib-stats, but theme-CONDITIONAL rather than pinned, so light mode
   keeps ordinary light cards. Both selectors mirror how ew-theme.css
   activates dark mode. */
:root[data-theme="dark"] .qtr-cell {
    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-color: #23262C;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

    :root[data-theme="dark"] .qtr-cell::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%);
    }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .qtr-cell {
        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-color: #23262C;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

        :root:not([data-theme="light"]) .qtr-cell::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%);
        }
}

/* the accent edge must stay above the sheen overlay */
.qtr-cell > * {
    position: relative;
    z-index: 1;
}

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

/* ---------- inline cross-links ------------------------------- */

.qtr-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

    .qtr-links a {
        display: inline-block;
        padding: .45rem .9rem;
        border: 1px solid var(--qtr-rule, rgba(0, 0, 0, 0.14));
        border-radius: 999px;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--qtr-ink);
        background: var(--qtr-panel, transparent);
        transition: border-color 140ms ease, background-color 140ms ease;
    }

        /* Border and background carry the accent on hover; the label keeps the
           body text color so it stays readable on a light background. */
        .qtr-links a:hover,
        .qtr-links a:focus-visible {
            border-color: var(--qtr-accent);
            background: color-mix(in srgb, var(--qtr-accent) 14%, transparent);
        }

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

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

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

.hq-figure {
    margin: 1.25rem 0 .75rem;
}

    /* The promo card is not the article: no border or panel around the chart,
   it sits directly on the card surface. */
    .hq-figure .qtr-chart-scroll {
        border: 0;
        background: none;
        padding: 0;
    }

.hq-chart {
    /* token scope — the chart marks resolve --qtr-* from here */
    --qtr-accent: var(--ew-color, #DDB785);
    --qtr-up: var(--ew-green, var(--ew-brightgreen, #4B8B5B));
    --qtr-down: var(--ew-red, #B4534F);
    --qtr-ink: var(--text, currentColor);
    --qtr-ink-soft: var(--text-muted, color-mix(in srgb, currentColor 65%, transparent));
    --qtr-rule: var(--border, color-mix(in srgb, currentColor 18%, transparent));
    --qtr-panel: var(--card-bg, var(--surface, transparent));
    display: block;
    width: 100%;
}

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