/*
 * The two reference pages: /sources/ and /methodology/.
 *
 * Reading pages, not dashboards — a single measured column on the same dark
 * ground as the rest of the campaign, with the chart tokens reused so these
 * do not become a third palette. Nothing here moves, so there is nothing for
 * a reduced-motion query to switch off.
 */

.ref-hero {
    background: #0A0E27;
    padding: 3.5rem 0 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ref-eyebrow {
    margin: 0 0 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #34D399;
}

.ref-title {
    margin: 0 0 0.9rem;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.12;
    color: #F1F5F9;
}

.ref-lede {
    max-width: var(--measure);
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-md);
    line-height: 1.65;
    color: #CBD5E1;
}

.ref-body {
    background: #0A0E27;
    padding: 2.5rem 0 4rem;
    color: #CBD5E1;
}

.ref-body .content-container { max-width: 56rem; }

.ref-h2 {
    margin: 2.75rem 0 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-lg);
    font-weight: 700;
    color: #F1F5F9;
}

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

.ref-para {
    margin: 0 0 1rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    line-height: 1.7;
    max-width: var(--measure);
}

.ref-body a { color: #34D399; }

/* --- summary ------------------------------------------------------------ */

.ref-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.75rem;
}

.ref-summary-item {
    /* Content, like the source entries below it. */
    border-radius: var(--r-none);
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.055);
}

.ref-summary-value {
    /* The record pass — figures of record are set in the serif. */
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: block;
    font-size: var(--t-2xl);
    color: #F1F5F9;
}

.ref-summary-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    color: #94A3B8;
}

/* --- filters ------------------------------------------------------------ */

.ref-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.7rem;
    margin: 0 0 1.75rem;
}

.ref-filter { display: flex; flex-direction: column; gap: 0.3rem; }

.ref-filter-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ref-filter select {
    min-height: 2.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: #F1F5F9;
}

.ref-filter select option { color: #0A0E27; background: #FFFFFF; }

.ref-filter-apply {
    min-height: 2.5rem;
    padding: 0.35rem 1.1rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    font-weight: 600;
    color: #34D399;
    cursor: pointer;
}

.ref-filter-clear { font-family: 'Inter', sans-serif; font-size: var(--t-xs); }

/* --- the register ------------------------------------------------------- */

.ref-sources { list-style: none; margin: 0; padding: 0; }

.ref-source {
    padding: 1.3rem 1.4rem;
    margin: 0 0 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.ref-source-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ref-source-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.35;
    color: #F1F5F9;
}

.ref-source-title a { color: inherit; text-decoration: none; }
.ref-source-title a:hover { color: #34D399; text-decoration: underline; }

.ref-verified {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #34D399;
    cursor: help;
}

.ref-source-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.5rem 1.2rem;
    margin: 0.9rem 0 0;
}

.ref-source-meta dt {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ref-source-meta dd {
    margin: 0.1rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: #E2E8F0;
}

.ref-source-supports {
    max-width: var(--measure);
    margin: 0.9rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: #CBD5E1;
}

.ref-source-supports strong { color: #F1F5F9; font-variant-numeric: tabular-nums; }

/* The source's own caveats, flagged the way the chart notes are. */
.ref-source-notes {
    max-width: var(--measure);
    margin: 0.8rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid #FBBF24;
    border-radius: 0 6px 6px 0;
    background: rgba(251, 191, 36, 0.09);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: #FDE8B4;
}

.ref-source-link {
    max-width: var(--measure);
    margin: 0.8rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: #94A3B8;
    overflow-wrap: anywhere;
}

/* --- methodology -------------------------------------------------------- */

.ref-steps,
.ref-checks,
.ref-vintage,
.ref-open {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    max-width: var(--measure);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    line-height: 1.7;
}

.ref-steps li,
.ref-checks li,
.ref-vintage li,
.ref-open li { margin: 0 0 0.7rem; }

.ref-steps strong,
.ref-checks strong,
.ref-vintage strong,
.ref-open strong { color: #F1F5F9; }

.ref-open-need {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--t-xs);
    color: #FBBF24;
}

.ref-methods { margin: 0; }

.ref-method {
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ref-method dt {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    font-weight: 700;
    color: #F1F5F9;
}

.ref-method-unit {
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ref-method dd {
    margin: 0.35rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    line-height: 1.65;
    color: #CBD5E1;
}

.ref-footnote {
    max-width: var(--measure);
    margin: 2.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: #94A3B8;
}

.ref-empty {
    padding: 2rem 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    color: #94A3B8;
}

@media (pointer: coarse) {
    .ref-filter select,
    .ref-filter-apply { min-height: 2.75rem; }

    /*
     * A title link is as wide as the card but only as tall as its line box —
     * 20px for a title that fits on one line. Padding rather than min-height
     * so a title that wraps to three lines is not stretched further.
     */
    .ref-source-title a {
        display: inline-block;
        padding: 0.75rem 0;
    }
}

@media (max-width: 640px) {
    .ref-hero { padding: 2.25rem 0 1.5rem; }
    .ref-source { padding: 1.1rem 0.9rem; }
}


/*
 * DESIGN-02 — list items are prose too.
 *
 * Grouped because these four lists are the same kind of content set four
 * ways; the single-paragraph rules carry the cap on themselves instead,
 * so there is no second place to look for a measure.
 */
.ref-steps li,
.ref-checks li,
.ref-vintage li,
.ref-open li,
.ref-methods dd {
    max-width: var(--measure);
}

/* ===========================================================================
   The record pass — see docs/RECORD-DESIGN-PASS.md
   =========================================================================== */

/*
 * 3. Radius as a signal. A source entry is a record to read, not a
 * control to press, so it loses its corners and keeps its rule.
 */
.ref-source {
    border-radius: var(--r-none);
}

.ref-filter-apply,
.ref-filters select { border-radius: var(--r-control); }

/* 5. No lift on something that cannot be pressed. */
.ref-source:hover { transform: none; }