/* Economic Intelligence.
   Chart palette: the eight-slot categorical set from the data-visualization guidance, validated with
   scripts/validate_palette.js against this site's own chart surfaces (#ffffff light, #0b101b dark) —
   both modes pass the lightness band, chroma floor, CVD separation and normal-vision floors. Three
   light-mode slots sit below 3:1 against the surface, so the "relief rule" applies: the chart always
   ships a legend plus a "view as table" twin, and identity is never carried by colour alone.
   Slot order is the colourblind-safety mechanism — do not reorder or extend past eight. */
.economic-intelligence {
    --ei-accent: var(--bs-info);
    --ei-series-1: #2a78d6;
    --ei-series-2: #eb6834;
    --ei-series-3: #1baf7a;
    --ei-series-4: #eda100;
    --ei-series-5: #e87ba4;
    --ei-series-6: #008300;
    --ei-series-7: #4a3aa7;
    --ei-series-8: #e34948;
    --ei-chart-surface: var(--chart-surface, #ffffff);
    --ei-chart-grid: var(--chart-grid, #e2e5ec);
    --ei-chart-axis: var(--border-subtle, #cbd2dd);
    --ei-chart-tick: var(--chart-tick, #5b6472);
}

[data-bs-theme="dark"] .economic-intelligence {
    /* Same eight hues, stepped for the dark surface — not an automatic flip. */
    --ei-series-1: #3987e5;
    --ei-series-2: #d95926;
    --ei-series-3: #199e70;
    --ei-series-4: #c98500;
    --ei-series-5: #d55181;
    --ei-series-6: #008300;
    --ei-series-7: #9085e9;
    --ei-series-8: #e66767;
}

.ei-hero {
    border: 1px solid var(--bs-border-color);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ei-accent) 18%, transparent), transparent 35%),
        color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-tertiary-bg));
}

.ei-tabs { position: sticky; top: .5rem; z-index: 20; padding: .5rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent); backdrop-filter: blur(12px); }
.ei-tabs .nav { gap: .5rem; scrollbar-width: thin; }
.ei-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; }

.ei-shell, .ei-metric, .ei-meta-card { border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); }
.ei-shell { overflow: hidden; }
.ei-shell-header { padding: 1.25rem; border-bottom: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--bs-tertiary-bg) 58%, var(--bs-body-bg)); }
.ei-meta-card { padding: 1rem; height: 100%; }
.ei-unavailable p:last-child { margin-bottom: 0; }

/* Headline metrics ------------------------------------------------------- */
.ei-metric { height: 100%; padding: 1rem; }
/* Proportional figures: tabular-nums makes a large standalone value look loose. */
.ei-metric-value { font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 800; }
.ei-direction { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ei-direction-good { color: var(--gain); }
.ei-direction-adverse { color: var(--loss); }
/* ContextDependent and Neutral must never read as good or bad. */
.ei-direction-neutral { color: var(--bs-secondary-color); }
.ei-change-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.ei-muted { color: var(--bs-secondary-color); }
.ei-unavailable-metrics { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .65rem .8rem; background: var(--bs-tertiary-bg); }
.ei-unavailable-metrics summary { cursor: pointer; font-weight: 600; }

/* Window bar and filter chips -------------------------------------------- */
.ei-window { border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: .75rem 1rem; background: color-mix(in srgb, var(--bs-tertiary-bg) 40%, var(--bs-body-bg)); }
.ei-range-chips .btn { min-width: 3.25rem; }
.ei-filter-chip { display: inline-flex; align-items: center; gap: .15rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); font-weight: 500; }
.ei-filter-chip .btn-close { --bs-btn-close-opacity: .65; font-size: .55rem; }
.ei-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }

/* Typeahead combobox ------------------------------------------------------ */
.ei-combobox-control { position: relative; }
.ei-combobox-list {
    position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 2px);
    margin: 0; padding: .25rem; list-style: none; max-height: 15rem; overflow-y: auto;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.ei-combobox-option { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: .35rem; cursor: pointer; font-size: .875rem; }
.ei-combobox-option:hover, .ei-combobox-option.active { background: var(--bs-tertiary-bg); }
.ei-combobox-option.active { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ei-combobox-option-label { overflow-wrap: anywhere; }
.ei-combobox-option-count { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ei-combobox-message { padding: .45rem .5rem; font-size: .8125rem; color: var(--bs-secondary-color); }

/* Chart ------------------------------------------------------------------- */
.ei-chart { border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: .75rem; background: var(--ei-chart-surface); }
.ei-chart-measure { max-width: 24rem; }
.ei-chart-figure { position: relative; }
/* The container grows with the plot plus its axis band — the x labels are never cropped. */
.ei-chart-svg { width: 100%; height: auto; display: block; }
.ei-chart-svg:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Recessive, solid hairlines — never dashed. */
.ei-grid { stroke: var(--ei-chart-grid); stroke-width: 1; }
.ei-axis { stroke: var(--ei-chart-axis); stroke-width: 1; }
.ei-axis-text { fill: var(--ei-chart-tick); font-size: 11px; font-variant-numeric: tabular-nums; }
.ei-axis-title { fill: var(--bs-secondary-color); font-size: 11px; font-weight: 600; }
.ei-series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Area/band fill is a ~10% wash of the series hue, never a saturated block. */
.ei-series-band { fill-opacity: .12; stroke: none; }
.ei-band-edge { stroke-width: 1.5; }
/* 2px surface ring keeps overlapping markers legible where they cross. */
.ei-series-dot { stroke: var(--ei-chart-surface); stroke-width: 2; }
.ei-series-dot.is-active { r: 6; }
.ei-series-bar { stroke: var(--ei-chart-surface); stroke-width: 2; }
.ei-series-bar.is-active { filter: brightness(1.12); }
.ei-chart-tooltip {
    position: absolute; transform: translate(-50%, -100%); pointer-events: none;
    background: var(--bs-body-bg); color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color); border-radius: .5rem;
    padding: .4rem .6rem; font-size: .8125rem; white-space: nowrap;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .2); z-index: 10;
}
.ei-legend { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: .75rem 0 0; font-size: .8125rem; }
.ei-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.ei-legend-swatch { width: .75rem; height: .25rem; border-radius: 999px; flex: 0 0 auto; }
.ei-chart-notes { margin-top: .5rem; padding-left: 1.1rem; }
.ei-chart-table { font-size: .8125rem; margin-bottom: 0; }
.ei-chart-table td { font-variant-numeric: tabular-nums; }

/* How to read ------------------------------------------------------------- */
.ei-how-to-read { border: 1px solid var(--bs-border-color); border-left: 3px solid var(--ei-accent); border-radius: .75rem; padding: 1rem; background: color-mix(in srgb, var(--bs-tertiary-bg) 35%, var(--bs-body-bg)); }
.ei-how-to-read-item + .ei-how-to-read-item { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bs-border-color); }

/* Observations table ------------------------------------------------------ */
.ei-column-menu { min-width: min(22rem, calc(100vw - 2rem)); max-height: 24rem; overflow-y: auto; }
.ei-table { min-width: 760px; }
.ei-table th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .035em; color: var(--bs-secondary-color); }
.ei-table td { vertical-align: middle; }
.ei-source-list a { overflow-wrap: anywhere; }
.ei-status-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.ei-empty { min-height: 14rem; display: grid; place-items: center; padding: 2rem; text-align: center; }

@media (max-width: 575.98px) {
    .ei-hero { border-radius: 1rem; }
    .ei-shell-header { padding: 1rem; }
    .ei-filter-grid { grid-template-columns: 1fr 1fr; }
    .ei-filter-grid .ei-filter-wide { grid-column: 1 / -1; }
    .ei-window { padding: .65rem .75rem; }
    .ei-range-chips { width: 100%; }
    .ei-range-chips .btn { flex: 1 1 auto; min-width: 0; padding-inline: .35rem; }
    .ei-axis-text { font-size: 13px; }
    .ei-legend { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ei-series-dot, .ei-series-bar { transition: none; }
}

@media print {
    .ei-tabs, .ei-filter-panel, .ei-column-picker, .ei-pagination, .ei-range-chips, .ei-chart-tooltip { display: none !important; }
    .ei-shell, .ei-metric, .ei-meta-card, .ei-chart, .ei-how-to-read { break-inside: avoid; box-shadow: none; }
}

/* forced-colors: hue is unavailable, so lean on the legend and the table view. */
@media (forced-colors: active) {
    .ei-series-line { stroke: CanvasText; }
    .ei-series-dot, .ei-series-bar { fill: CanvasText; stroke: Canvas; }
    .ei-legend-swatch { background: CanvasText !important; }
}