/* ============================================
   Blue Chip Analytics - Long-form Research Article
   Loaded ONLY on /research/<slug>/ pages whose registry entry sets
   "longform": True (see src/research/registry.py + generate_research_page.py).

   These articles arrived as standalone documents carrying their own design
   system (dark green + gold, Google Fonts, 18px serif). This file re-expresses
   every one of those components in base.css tokens so they read as Blue Chip
   pages. The MARKUP is unchanged — tables, charts, sorters, callouts and the
   Methods blocks are the authored artifacts and are preserved verbatim.

   Every rule is scoped under .research-longform. The source stylesheet styled
   bare elements (h2, h3, a, ul, figure, figcaption, svg, code, blockquote), so
   an unscoped port would leak into every other page that loads this file.
   ============================================ */

/* ── Root: the article column ─────────────── */

.research-longform {
    /* Card treatment identical to .content-section (base.css) so the article
       sits in the same surface as every other page section. */
    background: var(--color-bg-card);
    border-radius: 8px;
    padding: 20px 24px 28px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);

    color: var(--color-text-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);

    /* Local tokens. Prose runs at --fs-body (16px) rather than the site's
       --fs-sm, because these are 2,000-word reads rather than page sections.
       The headings are the site's --fs-h2 / --fs-h3 scaled by that same 1.11x
       so the size RELATIONSHIP matches .content-section exactly. */
    --lf-h2: 1.35rem;
    --lf-h3: 1.15rem;

    /* The site has no monospace token; numeric table cells and captions need
       one so figures align in columns. */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── Page column + artifact break-out ─────────
   Long-form articles run as a reading column rather than the site's full
   1200px container. The narrowing is applied to .container itself (the
   generator adds .research-longform-page), so the blocks it owns — answer
   capsule, sources, newsletter, FAQ, verdict echo — line up with the body
   instead of running wider than the prose they sit above.

   Text then simply fills that column; nothing is capped per element. The
   earlier approach capped each text element instead, which resolved against
   each element's own font-size and stepped the page 1176 / 887 / 638px. */

/* Two classes, so this beats base.css `.container { max-width: 1200px }` on
   specificity rather than on load order. */
.container.research-longform-page {
    max-width: 852px;   /* 780px of text + 24px card padding + 12px container padding */
}

/* Wide artifacts break back out to the site's normal 1200px measure. Symmetric
   negative margins with width:auto — the same technique the source drafts used,
   and it degrades correctly: once the viewport is narrower than the break-out
   target the margins shrink to zero rather than forcing a horizontal scrollbar.
   `.wide` is the drafts' own opt-out, applied to the genuinely wide artifacts
   (six-column season tables, charts) and deliberately NOT to narrow ones like a
   two-column definition table, so that distinction is preserved. */
.research-longform .tableblock.wide,
.research-longform figure.wide,
.research-longform .sortable-wrap.wide {
    margin-left: calc(50% - min(588px, 50vw - 12px));
    margin-right: calc(50% - min(588px, 50vw - 12px));
}

/* ── Dek + converted scoreboard ───────────────
   What is left of the source file's dark hero once the site header, H1, byline
   and answer capsule take over: the standfirst line and the three-number
   scoreboard, both of which are real artifacts. */

.research-longform .research-dek {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.research-longform .research-scoreboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 8px;
}

.research-longform .research-scoreboard .cell {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-mid);
    border-top: 4px solid var(--color-brand-light);
    border-radius: 6px;
    padding: 14px 12px;
    text-align: center;
}

.research-longform .research-scoreboard .lbl {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.research-longform .research-scoreboard .num {
    font-size: 2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    margin-top: 8px;
    color: var(--color-brand-dark);
    font-variant-numeric: tabular-nums;
}

.research-longform .research-scoreboard .num.accent {
    color: var(--color-brand-light);
}

.research-longform .research-scoreboard-cap {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
    margin: 0 0 20px;
}

/* ── Headings ─────────────────────────────────
   Same treatment as .content-section h2/h3 in base.css: brand-dark, semibold,
   underscored by a hairline rule. The source file got its hierarchy from a
   34px condensed display face; here it comes from the .kick eyebrow and the
   generous top margin instead. */

.research-longform h2 {
    font-size: var(--lf-h2);
    font-weight: var(--fw-semibold);
    color: var(--color-brand-dark);
    line-height: var(--lh-snug);
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-mid);
}

.research-longform h2:first-child {
    margin-top: 0;
}

.research-longform h2 .kick {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand-light);
    margin-bottom: 6px;
}

.research-longform h3 {
    font-size: var(--lf-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    line-height: var(--lh-snug);
    margin: 26px 0 8px;
}

/* The source file placed a decorative <hr class="rule"> under every h2. The
   h2 already carries a border-bottom, so this collapses to a short brand
   accent bar tucked tight beneath it rather than a second full-width line. */
.research-longform hr.rule {
    border: none;
    border-top: 3px solid var(--color-brand-light);
    width: 56px;
    margin: -1px 0 18px;
}

.research-longform hr:not(.rule) {
    border: none;
    border-top: 1px solid var(--color-border-mid);
    margin: 28px 0;
}

/* ── Prose ────────────────────────────────── */

.research-longform p {
    margin: 0 0 16px;
}

.research-longform ul,
.research-longform ol {
    margin: 0 0 16px;
    padding-left: 1.4em;
}

.research-longform li {
    margin-bottom: 6px;
}

.research-longform a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.research-longform strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.research-longform em {
    font-style: italic;
}

.research-longform code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--color-bg-subtle);
    padding: 0.08em 0.3em;
    border-radius: 3px;
}

/* ── "The short version" summary box ──────────
   Was a dark green panel. Mapped onto the site's callout family — the same
   card + 4px brand-light left border as .answer-capsule and .narrative-item. */

.research-longform .shortversion {
    background: var(--color-bg-subtle);
    border-left: 4px solid var(--color-brand-light);
    border-radius: 4px;
    padding: 16px 20px;
    margin: 0 0 24px;
}

.research-longform .shortversion .tag {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand-dark);
    margin-bottom: 10px;
}

.research-longform .shortversion p {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin-bottom: 10px;
}

.research-longform .shortversion p:last-child {
    margin-bottom: 0;
}

/* ── Callouts / blockquotes ───────────────── */

.research-longform .callout,
.research-longform blockquote {
    background: var(--color-bg-subtle);
    border-left: 4px solid var(--color-brand-light);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 20px 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.research-longform .callout .tag,
.research-longform blockquote h3:first-child {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}

.research-longform .callout p,
.research-longform blockquote p {
    margin-bottom: 8px;
}

.research-longform .callout p:last-child,
.research-longform blockquote p:last-child {
    margin-bottom: 0;
}

/* Caveat callouts use the site's warning tokens rather than a second accent. */
.research-longform .caveat {
    border-left-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

/* ── Figures / charts ─────────────────────── */

.research-longform figure {
    margin: 28px 0;
}

.research-longform .figwrap {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-mid);
    border-radius: 8px;
    padding: 18px 16px 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.research-longform .fig-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-brand-dark);
    margin: 0 4px 4px;
}

.research-longform .fig-sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0 4px 14px;
}

/* Reserves vertical space so the page does not reflow when the deferred chart
   library injects its <svg> (see /scripts/research-charts.js). */
.research-longform .chart-host {
    min-height: 240px;
}

.research-longform figcaption {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
    margin-top: 10px;
    padding: 0 4px;
    /* Held to the reading column even under a broken-out 1176px figure — a
       caption set at --fs-xs across the full artifact width is unreadable. */
    max-width: 780px;
}

.research-longform .fignum {
    color: var(--color-brand-light);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.research-longform svg {
    display: block;
    width: 100%;
    height: auto;
}

.research-longform svg text {
    font-family: var(--font-mono);
}

/* ── Data tables ──────────────────────────────
   Header/row treatment mirrors .summary-table in base.css. The behaviours the
   articles rely on — sticky header, capped scroll height, row highlights,
   pos/neg cell colour, wrapping .textual columns — are preserved. */

.research-longform .tableblock {
    margin: 20px 0 28px;
}

.research-longform .tablescroll {
    overflow: auto;
    border: 1px solid var(--color-border-mid);
    border-radius: 8px;
    background: var(--color-bg-card);
    max-height: 610px;
}

.research-longform .tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.research-longform .tbl th {
    background: var(--color-bg-subtle);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-dark);
    border-bottom: 2px solid var(--color-border-strong);
    padding: 9px 10px;
    text-align: right;
    white-space: nowrap;
}

.research-longform .tbl th:first-child,
.research-longform .tbl td:first-child {
    text-align: left;
}

.research-longform .tbl td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border-mid);
    text-align: right;
    white-space: nowrap;
}

.research-longform .tbl .textual {
    text-align: left;
    white-space: normal;
    min-width: 220px;
    font-family: var(--font-stack);
    font-size: var(--fs-sm);
}

.research-longform .tbl tr.hi td {
    background: var(--color-warning-bg);
}

.research-longform .tbl tr.baseline td {
    background: var(--color-bg-subtle);
    font-weight: var(--fw-semibold);
}

.research-longform .tbl .pos  { color: #2f855a; }
.research-longform .tbl .neg  { color: var(--color-danger); }
.research-longform .tbl .muted { color: var(--color-text-muted); }

.research-longform .tbl tbody tr:hover td {
    background: var(--color-bg-tint);
}

.research-longform .tablescroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Sort / filter controls ───────────────── */

.research-longform .sorter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    font-size: var(--fs-xs);
}

.research-longform .sorter-controls input {
    font-family: var(--font-stack);
    font-size: var(--fs-sm);
    padding: 8px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    min-width: 220px;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.research-longform .sorter-controls input:focus {
    outline: 2px solid var(--link-hover);
    outline-offset: 1px;
}

.research-longform .hint {
    color: var(--color-text-muted);
}

.research-longform .sortable th {
    cursor: pointer;
    user-select: none;
}

.research-longform .sortable th.sorted {
    color: var(--color-brand-light);
}

/* ── Numbered rules list ──────────────────── */

.research-longform ol.rules {
    counter-reset: r;
    list-style: none;
    margin: 20px 0;
    padding-left: 0;
}

.research-longform ol.rules li {
    counter-increment: r;
    position: relative;
    padding: 0 0 16px 56px;
    margin-bottom: 4px;
}

.research-longform ol.rules li::before {
    content: counter(r);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border: 2px solid var(--color-brand-dark);
    color: var(--color-brand-dark);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.research-longform ol.rules li strong {
    display: block;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-brand-dark);
    margin-bottom: 4px;
}

/* ── End mark + methods ───────────────────── */

.research-longform .endmark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 8px;
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.research-longform .endmark::before,
.research-longform .endmark::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border-mid);
}

.research-longform .methods {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-mid);
    padding-top: 18px;
    margin-top: 28px;
}

.research-longform .methods li {
    margin-bottom: 6px;
}

.research-longform .source-note {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: 16px;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
    .research-longform {
        padding: 16px 14px 22px;
        font-size: var(--fs-sm);
    }

    .research-longform h2 {
        margin-top: 30px;
    }

    .research-longform .research-scoreboard {
        grid-template-columns: 1fr;
    }

    .research-longform .research-scoreboard .num {
        font-size: 1.75rem;
    }

    .research-longform .shortversion,
    .research-longform .callout,
    .research-longform blockquote {
        padding: 14px 16px;
    }

    .research-longform .tbl th,
    .research-longform .tbl td {
        padding: 6px 8px;
    }

    .research-longform .tbl .textual {
        min-width: 160px;
    }

    /* A 920-unit viewBox squeezed into ~350px renders its axis labels at about
       4px. Give the charts the same treatment the tables already get: hold a
       legible minimum width and scroll inside the figure. */
    .research-longform .chart-host {
        overflow-x: auto;
    }

    .research-longform .chart-host svg {
        min-width: 560px;
    }

    .research-longform ol.rules li {
        padding-left: 46px;
    }

    .research-longform ol.rules li::before {
        width: 32px;
        height: 32px;
        font-size: var(--fs-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-longform *,
    .research-longform *::before,
    .research-longform *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .research-longform .sorter-controls {
        display: none;
    }

    .research-longform .tablescroll {
        max-height: none;
        overflow: visible;
    }

    .research-longform {
        box-shadow: none;
        max-width: 100%;
    }
}