/* ============================================================
   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);
}

/* An industry page runs two of these lists (papers, then tools) under their own
   headings, and follows them with a link to the full index. */
.analysis-group {
    margin-bottom: var(--space-4);
}

.analysis-group ~ .analysis-group {
    margin-top: var(--space-9);
}

.analysis-all {
    padding-top: var(--space-7);
    color: var(--text-secondary);
}

.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 */
    --phase-hatch: rgba(255, 255, 255, 0.82);  /* texture ink on the dark surface */
}

[data-theme="light"] .chart {
    --series-1: #2f72e0;
    --series-2: #d95926;
    --mark-up: #d95926;
    --mark-down: #2f72e0;
    --phase-hatch: rgba(255, 255, 255, 0.92);
}

.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); }

/* Single-series bars, where the measure has no up/down polarity to encode.
   Aliases the validated slot-1 colour rather than introducing a third one. */
.bar-neutral { fill: var(--series-1); }
.bar-neutral.bar-muted { opacity: 0.45; }

/* Uncertainty range on an estimate. Deliberately low-contrast: it is the
   backdrop the point estimate sits inside, not a series in its own right. */
.band-range {
    fill: var(--series-1);
    opacity: 0.16;
}

/* 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;
}

/* --------------------------------------------- cycle phase timeline

   Four phases, TWO colours. A four-hue categorical set was tried and
   rejected: two steps of one hue cannot clear the all-pairs separation
   floor, and four unrelated hues would throw away the fact that the
   phases are not unrelated at all.

   So the two channels carry the two axes of the classification:

     hue      level    — warm: the line is beating inflation
                         cool: it is falling behind
     texture  momentum — solid: level and direction agree (a settled phase)
                         hatched: they disagree (the market is turning)

   which makes hard/soft the solid pair and softening/hardening the
   hatched pair. Both hues are the validated diverging poles already in
   use above (all-pairs CVD dE 30.0 dark / 27.4 light, normal-vision 34.2
   / 33.7, both clear 3:1 on their own surface). Every band is also
   directly labelled, so the reading survives greyscale and print with no
   colour at all.                                                       */

.phase-band.level-up { fill: var(--mark-up); }
.phase-band.level-down { fill: var(--mark-down); }

.phase-band.turning { fill: var(--phase-hatch); }

/* White glyphs with a dark halo, drawn under the fill. Both band hues are
   mid-tone, so a plain fill would sit at roughly 4:1 on one of them and the
   texture would cut through the strokes on the turning phases. The halo fixes
   both and is identical in light and dark mode, because the bands are. */
.phase-label {
    fill: #fff;
    stroke: rgba(0, 0, 0, 0.62);
    stroke-width: 2.5px;
    paint-order: stroke fill;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono);
    dominant-baseline: middle;
}

.phase-track-label {
    fill: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono);
    dominant-baseline: middle;
    text-anchor: end;
}

/* An unconfirmed turn is drawn as an outline over the standing phase, not
   as a fill of the new one — the series must not repaint a call it has
   not yet made. */
.phase-pending {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

.legend-swatch.level-up { background: var(--mark-up); }
.legend-swatch.level-down { background: var(--mark-down); }

.legend-swatch.turning {
    background:
        repeating-linear-gradient(45deg,
            var(--text-primary) 0 1.5px,
            transparent 1.5px 5px),
        var(--surface-2);
    opacity: 0.85;
}

.legend-swatch.pending {
    background: none;
    border: 1.5px dashed var(--text-primary);
}

/* ------------------------------------------------------ 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;
    }
}