/* Macro charts (/OfficialData/Macro-Charts, contract macro-charts-v1 §7.5).
   An editorial page: cream paper cards in light theme, the app's dark surfaces in dark theme,
   serif titles over small upper-case kickers, thin lines on dotted horizontal gridlines.
   Every colour is a page-scoped --macro-* token built on the app tokens in site.css; Bootstrap's
   --bs-* variables are undefined in this app and are never referenced here. */

.macro-charts-page {
    --macro-serif: Georgia, "Times New Roman", Times, serif;
    --macro-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Dark theme is the base, matching site.css where :root carries the dark palette. */
    --macro-paper: var(--surface-panel);
    --macro-paper-edge: var(--border-subtle);
    --macro-ink: var(--text);
    --macro-muted: var(--text-muted);
    --macro-grid: rgba(237, 241, 247, .16);
    --macro-chip: var(--surface-raised);
    --macro-usa: #7fb2ff;
    --macro-ea20: #ff9b6a;
    --macro-gbr: #c79bff;
    --macro-jpn: #f2c85b;
    --macro-ind: #5fd39a;
    --macro-euu: #4fd1d9;
    --macro-policy: #e9e4d6;
    --macro-stale: var(--warning);
    color: var(--macro-ink);
}

[data-bs-theme="light"] .macro-charts-page {
    --macro-paper: #fbf6e9;
    --macro-paper-edge: #e6dcc3;
    --macro-grid: rgba(74, 60, 30, .24);
    --macro-chip: #f3ecda;
    --macro-usa: #1d4f9c;
    --macro-ea20: #b4471c;
    --macro-gbr: #6d3596;
    --macro-jpn: #8a6400;
    --macro-ind: #1f7a4a;
    --macro-euu: #0d7278;
    --macro-policy: #2b2a26;
    --macro-stale: #8a5a00;
}

.macro-page-head { margin-bottom: 1.25rem; max-width: 52rem; }
.macro-page-title { font-family: var(--macro-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -.01em; margin-bottom: .35rem; }
.macro-page-intro { color: var(--macro-muted); font-size: 1rem; margin-bottom: 0; }

.macro-status { border-radius: .75rem; font-size: .95rem; margin-bottom: 1rem; padding: .85rem 1rem; }
.macro-status:empty, .macro-status[hidden] { display: none; }
.macro-status-loading, .macro-status:not([data-state]) { background: var(--macro-paper); border: 1px solid var(--macro-paper-edge); color: var(--macro-muted); }
.macro-status-unavailable { background: var(--macro-paper); border: 1px solid var(--macro-paper-edge); color: var(--macro-ink); }
.macro-status-error { background: var(--macro-paper); border: 1px solid var(--down); color: var(--macro-ink); }

.macro-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.macro-grid[hidden] { display: none; }
.macro-card-wide { grid-column: 1 / -1; }

.macro-card {
    background: var(--macro-paper);
    border: 1px solid var(--macro-paper-edge);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: clamp(1rem, 2.4vw, 1.6rem);
}

.macro-card-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; }
.macro-card-heading { min-width: 0; }
.macro-kicker { color: var(--macro-muted); font-family: var(--macro-sans); font-size: .7rem; font-weight: 700; letter-spacing: .09em; margin-bottom: .3rem; text-transform: uppercase; }
.macro-card-title { font-family: var(--macro-serif); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 600; line-height: 1.2; margin: 0; }

.macro-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.macro-controls:empty { display: none; }
.macro-country { background-color: var(--macro-chip); border-color: var(--macro-paper-edge); color: var(--macro-ink); max-width: 13rem; min-width: 9rem; width: auto; }

.macro-range { border: 1px solid var(--macro-paper-edge); border-radius: 999px; display: inline-flex; overflow: hidden; }
.macro-range-btn {
    background: transparent;
    border: 0;
    color: var(--macro-muted);
    font-family: var(--macro-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    min-height: 2rem;
    min-width: 2.9rem;
    padding: .3rem .7rem;
    text-transform: uppercase;
}
.macro-range-btn + .macro-range-btn { border-left: 1px solid var(--macro-paper-edge); }
.macro-range-btn:hover { color: var(--macro-ink); }
.macro-range-btn[aria-pressed="true"] { background: var(--macro-ink); color: var(--macro-paper); }
.macro-range-btn:focus-visible, .macro-country:focus-visible, .macro-footer a:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }

.macro-latest { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.macro-latest:empty { display: none; }
.macro-latest-item { align-items: baseline; display: inline-flex; flex-wrap: wrap; font-size: .85rem; gap: .35rem; }
.macro-latest-label { color: var(--macro-muted); }
.macro-latest-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.macro-latest-period { color: var(--macro-muted); font-size: .78rem; }
.macro-swatch { align-self: center; background: var(--macro-swatch, currentColor); border-radius: 2px; display: inline-block; flex: 0 0 auto; height: 3px; width: .9rem; }
.macro-stale { border: 1px solid var(--macro-stale); border-radius: 999px; color: var(--macro-stale); font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: 0 .45rem; text-transform: uppercase; }

.macro-card-body { min-width: 0; }
.macro-card-body:empty { display: none; }
.macro-canvas-wrap { height: var(--macro-chart-height, 16rem); position: relative; width: 100%; }
.macro-canvas-wrap canvas { display: block; }

.macro-legend { display: flex; flex-wrap: wrap; font-size: .8rem; gap: .3rem 1rem; margin-top: .4rem; }
.macro-legend[hidden] { display: none; }
.macro-legend-item { align-items: center; color: var(--macro-ink); display: inline-flex; gap: .35rem; }

.macro-unavailable { color: var(--macro-muted); font-size: .9rem; margin: .25rem 0; }
.macro-notes:empty { display: none; }
.macro-note { color: var(--macro-muted); font-size: .8rem; margin: 0 0 .2rem; }

.macro-footer { border-top: 1px dotted var(--macro-paper-edge); padding-top: .5rem; }
.macro-footer:empty { display: none; }
.macro-source { color: var(--macro-muted); font-family: var(--macro-serif); font-size: .8rem; font-style: italic; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.macro-footer a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

.macro-multiples { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.macro-multiple { border-top: 1px solid var(--macro-paper-edge); min-width: 0; padding-top: .6rem; }
.macro-multiple-head .macro-latest-item { font-size: .8rem; }
/* Name on its own row, value and period beneath, so every header has the same two-row shape. */
.macro-multiple-head .macro-latest-label { flex-basis: calc(100% - 1.25rem); }
.macro-swatch-dashed { background: none; border-top: 2px dashed var(--macro-swatch); height: 0; }
.macro-multiple-head .macro-latest-label { color: var(--macro-ink); font-family: var(--macro-serif); font-size: .95rem; font-weight: 600; }

/* Tablet: two-up panels become one column, small multiples wrap to three. */
@media (max-width: 991.98px) {
    .macro-grid { grid-template-columns: minmax(0, 1fr); }
    .macro-multiples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone: controls wrap under the title, small multiples stack in one column. */
@media (max-width: 575.98px) {
    .macro-card { border-radius: .75rem; }
    .macro-card-head { flex-direction: column; }
    .macro-controls { width: 100%; }
    .macro-country { flex: 1 1 9rem; max-width: none; }
    .macro-multiples { grid-template-columns: minmax(0, 1fr); }
    .macro-canvas-wrap { height: min(var(--macro-chart-height, 16rem), 15rem); }
}