/* ============================================================
   Analysis — research papers & data analysis
   Section landing (/analysis/) and paper pages.
   Tokens only; no hex. Dark-first, with light overrides where
   a value must be stepped for the surface rather than flipped.
   ============================================================ */

/* ---------------------------------------------- section landing

   The navbar is position:fixed, so every page owns its own top clearance.
   css/tools.css solves this for the resource sections with a 140px header
   pad; this section is self-contained and does not load that stylesheet,
   so it repeats the clearance rather than inheriting it.                  */

.analysis-header {
    padding: 140px 0 var(--space-9);
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(61, 139, 255, 0.10), transparent 70%),
        var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
}

.analysis-header .eyebrow {
    justify-content: center;
}

.analysis-header h1 {
    margin: var(--space-3) 0 var(--space-4);
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--text-primary);
}

.analysis-header p {
    max-width: 68ch;
    margin: 0 auto;
    font-size: var(--text-body-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

.analysis-list {
    padding: var(--space-8) 0 var(--space-12);
}

.analysis-paper {
    display: block;
    padding: var(--space-7) 0;
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition: opacity 160ms var(--ease-out);
}

.analysis-paper:last-child {
    border-bottom: 1px solid var(--border-subtle);
}

.analysis-paper:hover .analysis-paper-title,
.analysis-paper:focus-visible .analysis-paper-title {
    color: var(--text-accent);
}

.analysis-paper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.analysis-paper-title {
    font-size: var(--text-h3);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    margin: 0 0 var(--space-3);
    transition: color 160ms var(--ease-out);
}

.analysis-paper-summary {
    font-size: var(--text-body);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    max-width: 62ch;
}

.analysis-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.analysis-topic {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    padding: 2px var(--space-2);
}

.analysis-empty {
    color: var(--text-tertiary);
    padding: var(--space-8) 0;
}

/* ------------------------------------------------- paper layout */

.paper {
    max-width: 74ch;
    margin: 0 auto;
    /* 128px clears the fixed navbar with room to breathe. */
    padding: 128px var(--space-5) var(--space-12);
}

.paper-header {
    padding-bottom: var(--space-7);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-8);
}

.paper-title {
    font-size: var(--text-display-lg);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    margin: var(--space-3) 0 var(--space-5);
}

.paper-standfirst {
    font-size: var(--text-body-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
}

.paper-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
}

.paper h2 {
    font-size: var(--text-h2);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin: var(--space-10) 0 var(--space-4);
    scroll-margin-top: var(--space-8);
}

.paper h3 {
    font-size: var(--text-h4);
    font-weight: var(--fw-medium);
    margin: var(--space-7) 0 var(--space-3);
}

.paper p {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.paper strong {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

.paper a:not(.tool-button) {
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.paper ul,
.paper ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
    color: var(--text-secondary);
    line-height: 1.7;
}

.paper li {
    margin-bottom: var(--space-2);
}

.paper li::marker {
    color: var(--text-tertiary);
}

/* Numbers in prose read as data, not words. */
.paper .num {
    font-family: var(--font-mono);
    font-size: 0.94em;
    color: var(--text-primary);
}

/* ---------------------------------------------------- stat tiles */

.paper-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: var(--space-7) 0;
}

.paper-stat {
    background: var(--surface-1);
    padding: var(--space-5);
}

.paper-stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.paper-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-h2);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--text-primary);
}

.paper-stat-note {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
    line-height: 1.45;
}

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

.figure {
    margin: var(--space-8) 0;
}

/* Charts get the full column width back, plus a little bleed on wide screens. */
@media (min-width: 900px) {
    .figure {
        width: calc(100% + var(--space-10));
        margin-left: calc(var(--space-10) / -2);
    }
}

.figure-caption {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-top: var(--space-3);
}

.figure-caption strong {
    color: var(--text-secondary);
}

.chart {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4) var(--space-4);
    position: relative;
}

.chart-title {
    font-size: var(--text-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-2);
}

.chart-subtitle {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin: 0 0 var(--space-4);
    padding: 0 var(--space-2);
}

.chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

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

   Series colors are stepped per surface, not flipped. Validated as a
   categorical pair against each surface (adjacent CVD dE 30.0 dark /
   28.5 light; both clear 3:1 on their own surface).                  */

.chart {
    --series-1: #3d8bff;   /* approved rate changes  — brand accent */
    --series-2: #d95926;   /* realized premiums      — validated slot 2 */
    --mark-up: #d95926;    /* diverging: rates rising */
    --mark-down: #3d8bff;  /* diverging: rates falling */
}

[data-theme="light"] .chart {
    --series-1: #2f72e0;
    --series-2: #d95926;
    --mark-up: #d95926;
    --mark-down: #2f72e0;
}

.ax-line {
    stroke: var(--border-default);
    stroke-width: 1;
}

.ax-grid {
    stroke: var(--grid-line);
    stroke-width: 1;
}

.ax-zero {
    stroke: var(--border-strong);
    stroke-width: 1;
}

.ax-text {
    fill: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono);
}

.ax-text.anchor-end { text-anchor: end; }
.ax-text.anchor-mid { text-anchor: middle; }

.bar-up { fill: var(--mark-up); }
.bar-down { fill: var(--mark-down); }

/* Provisional quarters are hatched, so incompleteness survives greyscale
   and colorblind viewing rather than relying on a lighter tint. */
.bar-provisional { opacity: 0.55; }

.flag-dot {
    fill: var(--text-primary);
}

.series-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.series-1 { stroke: var(--series-1); }
.series-2 { stroke: var(--series-2); }

.series-line.dashed {
    stroke-dasharray: 5 4;
}

.series-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono);
    font-weight: 500;
}

.series-label.s1 { fill: var(--series-1); }
.series-label.s2 { fill: var(--series-2); }

.band-provisional {
    fill: var(--text-primary);
    opacity: 0.04;
}

/* ------------------------------------------------------- legend */

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-4) var(--space-2) 0;
    font-size: var(--text-caption);
    color: var(--text-secondary);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-swatch {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-swatch.block {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-xs);
}

.legend-swatch.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-primary);
}

.legend-swatch.s1 { background: var(--series-1); }
.legend-swatch.s2 { background: var(--series-2); }
.legend-swatch.up { background: var(--mark-up); }
.legend-swatch.down { background: var(--mark-down); }

.legend-swatch.hatch {
    background: var(--text-primary);
    opacity: 0.3;
}

/* ------------------------------------------------------ tooltip */

.chart-tip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    background: var(--surface-3, var(--surface-2));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--text-caption);
    line-height: 1.5;
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
    min-width: 130px;
    opacity: 0;
    transition: opacity 120ms var(--ease-out);
}

.chart-tip[data-show="true"] {
    opacity: 1;
}

.chart-tip-key {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.chart-tip-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.chart-tip-row span:last-child {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.chart-tip-note {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
}

.chart-crosshair {
    stroke: var(--border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.hover-target {
    fill: transparent;
    cursor: crosshair;
}

.hover-dot {
    stroke: var(--surface-1);
    stroke-width: 2;
}

.hover-dot.s1 { fill: var(--series-1); }
.hover-dot.s2 { fill: var(--series-2); }

/* --------------------------------------------------- data table

   Every chart ships a table alternative. Collapsed by default so it
   does not compete with the figure, but it is real markup — not an
   image caption — so it is reachable by screen readers and search. */

.data-table-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
    background: none;
    border: none;
    padding: var(--space-3) var(--space-2) 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.data-table-toggle:hover {
    color: var(--text-secondary);
}

.data-table-wrap {
    max-height: 320px;
    overflow: auto;
    margin-top: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-caption);
}

table.data-table th,
table.data-table td {
    padding: var(--space-2) var(--space-3);
    text-align: right;
    border-bottom: 1px solid var(--border-subtle);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

table.data-table th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    color: var(--text-tertiary);
    font-weight: var(--fw-regular);
    text-align: right;
}

table.data-table th:first-child,
table.data-table td:first-child {
    text-align: left;
}

/* --------------------------------------------------- callout box */

.paper-callout {
    border-left: 2px solid var(--accent);
    background: var(--accent-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-5);
    margin: var(--space-7) 0;
}

.paper-callout p:last-child {
    margin-bottom: 0;
}

.paper-callout-label {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
    margin-bottom: var(--space-3);
}

/* ------------------------------------------------ method / notes */

.paper-method {
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
}

.paper-method h2 {
    margin-top: 0;
}

.paper-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
}

.paper-step {
    counter-increment: step;
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-6);
}

.paper-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--text-accent);
    letter-spacing: var(--tracking-mono);
}

.paper-step h3 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-size: var(--text-body);
}

.paper-step p:last-child {
    margin-bottom: 0;
}

/* Where the published method departs from the original plan. */
.paper-deviation {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-top: var(--space-3);
    background: var(--surface-inset, var(--surface-1));
}

.paper-deviation-label {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--warning-500);
    margin-bottom: var(--space-2);
}

.paper-deviation p {
    margin-bottom: 0;
    font-size: var(--text-body-sm);
}

/* ------------------------------------------------------- sources */

.paper-sources {
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-10);
    padding-top: var(--space-7);
}

.paper-sources h2 {
    margin-top: 0;
}

.source-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0;
}

.source-list li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-body-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.source-name {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.paper-licence {
    font-size: var(--text-body-sm);
    color: var(--text-tertiary);
    line-height: 1.65;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    margin-top: var(--space-6);
}

.paper-licence p {
    font-size: inherit;
    color: inherit;
}

.paper-licence p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------- responsive */

@media (max-width: 820px) {
    .paper {
        padding: 104px var(--space-4) var(--space-10);
    }

    .analysis-header {
        padding-top: 112px;
    }

    .paper-title {
        font-size: var(--text-h1);
    }

    .figure {
        width: 100%;
        margin-left: 0;
    }
}

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

    .chart {
        padding: var(--space-4) var(--space-2) var(--space-3);
    }

    .paper-stat-value {
        font-size: var(--text-h3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .analysis-paper,
    .analysis-paper-title,
    .chart-tip {
        transition: none;
    }
}