#economic-indicators-dialog { width: min(1200px, calc(100vw - 24px)); max-width: calc(100vw - 24px); background: var(--ds-color-background); }
#economic-indicators-dialog .dialog-heading { background: var(--ds-color-background); }
#economic-indicators-dialog .dialog-heading [data-close-icon] { align-items: center; justify-content: center; min-width: var(--ds-control-min-height); min-height: var(--ds-control-min-height); flex-shrink: 0; }
#economic-indicators-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); }
.economic-card { min-width: 0; padding: var(--ds-space-5); border: var(--ds-border-width) solid var(--ds-color-border); border-radius: var(--ds-radius-panel); background: var(--ds-color-surface); }
.economic-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); }
.economic-card h3 { margin: 0; font-size: var(--ds-font-size-heading); }
.economic-card p { overflow-wrap: anywhere; }
.economic-description, .economic-source { color: var(--ds-color-text-muted); font-size: var(--ds-font-size-help); line-height: 1.5; }
.economic-source a { display: inline-flex; align-items: center; min-height: var(--ds-control-min-height); color: var(--ds-color-action-text); text-underline-offset: 2px; }
.economic-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-3); padding: 0; margin: var(--ds-space-5) 0 var(--ds-space-3); list-style: none; }
.economic-legend-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--ds-space-2); align-content: start; font-size: var(--ds-font-size-help); }
.economic-legend-swatch { grid-column: 1; grid-row: 1; align-self: center; border-top: 3px solid var(--economic-series-color); }
.economic-region-name, .economic-latest-value, .economic-observation-date, .economic-series-warning { grid-column: 2; overflow-wrap: anywhere; }
.economic-value-pair { grid-column: 2; overflow-wrap: anywhere; }
.economic-value-pair .economic-cursor-value { display: inline-block; margin-inline-start: var(--ds-space-2); white-space: nowrap; color: var(--ds-color-text-muted); font-size: var(--ds-font-size-label); font-weight: normal; font-variant-numeric: tabular-nums; }
.economic-legend.economic-legend-single { grid-template-columns: minmax(0, 1fr); }
.economic-cursor-status { min-height: 1.5em; margin: var(--ds-space-1) 0; color: var(--ds-color-text-muted); font-size: var(--ds-font-size-help); }
.economic-cursor-marker { fill: var(--ds-color-surface); stroke: var(--economic-series-color); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.economic-latest-value { font-size: var(--ds-font-size-body); font-weight: var(--ds-font-weight-heading); font-variant-numeric: tabular-nums; margin-top: var(--ds-space-1); }
.economic-observation-date { color: var(--ds-color-text-muted); }
.economic-series-warning { color: var(--ds-color-warning-text); }
.economic-status { color: var(--ds-color-text-muted); font-size: var(--ds-font-size-help); }
.economic-status:empty, .economic-source:empty { display: none; }
.economic-plot { min-width: 0; }
.economic-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.economic-plot svg text { fill: var(--ds-color-text-muted); font-size: 12px; font-family: var(--ds-font-family-body); }
.economic-grid-line { stroke: var(--ds-color-border); stroke-width: 1; }
.economic-series-us { --economic-series-color: var(--ds-color-chart-us); }
.economic-series-euro { --economic-series-color: var(--ds-color-chart-euro); }
.economic-series-de { --economic-series-color: var(--ds-color-chart-de); }
.economic-series-es { --economic-series-color: var(--ds-color-chart-es); }
.economic-series-jp { --economic-series-color: var(--ds-color-chart-jp); }
.economic-series-crypto { --economic-series-color: var(--ds-color-action-text); }
.economic-gauge { max-width: 340px; margin: var(--ds-space-5) auto; text-align: center; }
.economic-gauge-drawing svg { display: block; width: 100%; height: auto; }
.economic-gauge-drawing svg text { fill: var(--ds-color-text-muted); font: 12px var(--ds-font-family-body); }
.economic-gauge-band { fill: none; stroke-width: 24; }
.economic-gauge-band-0 { stroke: var(--ds-color-sentiment-0); }
.economic-gauge-band-1 { stroke: var(--ds-color-sentiment-1); }
.economic-gauge-band-2 { stroke: var(--ds-color-sentiment-2); }
.economic-gauge-band-3 { stroke: var(--ds-color-sentiment-3); }
.economic-gauge-band-4 { stroke: var(--ds-color-sentiment-4); }
.economic-gauge-needle { stroke: var(--ds-color-text); stroke-width: 3; stroke-linecap: round; }
.economic-gauge-center { fill: var(--ds-color-action); stroke: var(--ds-color-action-text); stroke-width: 2; }
.economic-gauge-category { display: block; font-size: var(--ds-font-size-heading); margin-top: var(--ds-space-2); }
.economic-gauge .economic-legend { margin-top: var(--ds-space-2); }
.economic-gauge .economic-legend-item { display: flex; flex-direction: column; align-items: center; }
.economic-gauge .economic-legend-swatch, .economic-gauge .economic-region-name { display: none; }
.economic-gauge .economic-latest-value { font-size: 2rem; }
.economic-plot .economic-series-line { stroke: var(--economic-series-color); stroke-width: 2.3; vector-effect: non-scaling-stroke; }
.economic-plot .economic-last-point { fill: var(--economic-series-color); stroke: var(--ds-color-surface); stroke-width: 1; }
.economic-series-euro .economic-series-line { stroke-dasharray: 8 3; }
.economic-series-de .economic-series-line { stroke-dasharray: 3 3; }
.economic-series-jp .economic-series-line { stroke-dasharray: 9 3 2 3; }
.economic-series-euro .economic-legend-swatch, .economic-series-de .economic-legend-swatch, .economic-series-jp .economic-legend-swatch { border-top-style: dashed; }
.economic-periods { flex-wrap: wrap; }
.economic-periods button { min-width: var(--ds-control-min-height); min-height: var(--ds-control-min-height); }
@media (max-width: 700px) { .economic-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) {
  .economic-card { padding: var(--ds-space-3); }
  .economic-card-heading { flex-wrap: wrap; }
  .economic-card h3 { font-size: var(--ds-font-size-body); }
  .economic-card-heading .button { font-size: var(--ds-font-size-help); }
  .economic-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-1); }
  .economic-periods button { min-width: 0; padding: var(--ds-space-1) 2px; }
}