/* One reusable card. No column count, fixed width or absolute positioning. */
.indicator-card{container-type:inline-size;min-width:0;width:100%;display:flex;flex-direction:column;align-self:stretch;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--text);text-align:left}
.indicator-card__header{display:flex;align-items:flex-start;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.indicator-card__actions{display:inline-flex;flex:0 0 auto;margin-left:auto}
.indicator-card__header .indicator-card__title{font-size:15px;font-weight:650;line-height:1.25;letter-spacing:0;margin:0;min-width:0;overflow-wrap:anywhere;text-transform:none}
.indicator-card__body{display:grid;gap:12px;padding:18px 16px;flex:1;align-content:start}
.indicator-card__reading{display:flex;align-items:center;gap:14px;min-width:0}
.indicator-card__value{padding:0;text-align:left;font-size:clamp(25px,10cqi,38px);font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;color:var(--text);flex:0 1 auto}
.indicator-card__spark{flex:1;min-width:50px;max-width:180px;padding:4px 0;margin-left:auto;color:var(--blue)}
.indicator-card__spark svg{display:block;width:100%;height:50px;margin:0;max-width:100%}
.indicator-card__value:hover,.indicator-card__details:hover{color:var(--blue)}
.indicator-card__period{font-size:11px;color:var(--muted);line-height:1.5;margin:0}
.indicator-card__assessment{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--muted)}
.indicator-card__assessment .trend-mark{margin:0;cursor:pointer}
.indicator-card__description{font-size:12px;line-height:1.65;color:var(--muted);margin:0}
.indicator-card__extra{font-size:11px;color:var(--muted);line-height:1.5}
.indicator-card__footer{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.indicator-card__details{font-size:11px;color:var(--blue);padding:0;text-align:left}
.indicator-card [hidden]{display:none!important}
.indicator-card .collection-tools{display:inline-flex;gap:4px}
@container(max-width:250px){.indicator-card__header{gap:7px;padding:12px}.indicator-card__header .indicator-card__title{font-size:14px}.indicator-card__body{padding:14px 12px}.indicator-card__reading{gap:8px}.indicator-card__value{font-size:25px}.indicator-card__footer{padding:12px}}

/* Compact indicator layout; graph cards retain their own spacing. */
.indicator-card>.indicator-card__header{padding:10px 12px;gap:8px}
.indicator-card>.indicator-card__body{padding:12px;gap:8px}
.indicator-card .indicator-card__reading{gap:10px}
.indicator-card .indicator-card__value{font-size:clamp(24px,9cqi,32px)}
.indicator-card .indicator-card__spark{padding:2px 0}
.indicator-card .indicator-card__spark svg{height:38px}
.indicator-card .indicator-card__spark{color:var(--blue)}
.indicator-card .indicator-card__spark[data-trend=positive]{color:var(--green)}
.indicator-card .indicator-card__spark[data-trend=negative]{color:var(--red)}
.indicator-card .indicator-card__spark svg{color:inherit!important}
.indicator-card .indicator-card__spark svg :is(path,polyline,line){stroke:currentColor}
.indicator-card .indicator-card__spark svg circle{fill:currentColor}
.indicator-card .indicator-card__description{line-height:1.5}
.indicator-card>.indicator-card__footer{padding:8px 12px;gap:6px}

/* Visual hierarchy uses theme tokens; status colours are reserved for evaluation. */
.indicator-card>.indicator-card__header{background:color-mix(in srgb,var(--blue) 9%,var(--panel));border-bottom-color:color-mix(in srgb,var(--blue) 22%,var(--line))}
.indicator-card .indicator-card__reading{background:color-mix(in srgb,var(--blue) 4%,var(--panel));border-radius:6px;padding:4px 8px}
.indicator-card .indicator-card__value{color:var(--blue)}
.indicator-card .indicator-card__secondary{color:var(--text)}
.indicator-card .indicator-card__assessment .trend-mark{padding:3px 6px;border-radius:4px;background:var(--surface-soft)}
.indicator-card .indicator-card__assessment .trend-mark.positive{background:color-mix(in srgb,var(--green) 12%,var(--panel))}
.indicator-card .indicator-card__assessment .trend-mark.negative{background:color-mix(in srgb,var(--red) 12%,var(--panel))}
.indicator-card .indicator-card__description-block{border-left:2px solid var(--line);padding-left:8px}
.indicator-card>.indicator-card__footer{background:var(--surface-soft)}

.indicator-card__secondary{font-size:13px;line-height:1.5;color:var(--muted)}
.indicator-card__secondary .metric-absolute{margin:0;font-size:inherit}
.indicator-card__comparison{margin:0;line-height:1.6}
#signals:has(>.indicator-card){display:grid;gap:12px;padding:0}

.indicator-card__section-link{font-size:11px;color:var(--blue)}


.indicator-card__description-block:not(.is-expanded) .indicator-card__description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.indicator-card__more{display:inline-block;margin-top:5px;padding:0;font-size:11px;line-height:1.5;color:var(--blue);text-align:left}


.indicator-card__eu-reference{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.indicator-card__extra>p,.indicator-card__extra .eu-extremes p{margin:0 0 8px;line-height:1.6}

html[data-page=economy] #economy-sector-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.indicator-card__sector-share p{margin:0 0 6px}.indicator-card__sector-share svg{display:block;width:100%;height:8px;margin-top:10px}
.indicator-card__economy-history summary{cursor:pointer;color:var(--blue);font-size:12px;line-height:1.5}
.indicator-card__economy-history .economy-chart{margin-top:12px}
@media(max-width:650px){html[data-page=economy] #economy-sector-bars{grid-template-columns:minmax(0,1fr)}}
/* Long units must fit narrow cards just as comfortably as percentages. */
.indicator-card__body{min-width:0}
.indicator-card .indicator-card__value{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.indicator-card .indicator-card__spark{flex:1 0 50px}