/* Homepage visual readability pass: larger signal mix + ordered heat map. */
#demandVisuals .homeVizCard:has(#homeMix){grid-column:1/-1}

/* Homepage market sections should stay clean: geography is already explicit in the text. */
#homeMarketCards .wsFlag,
#homeBars .wsFlag{display:none!important}

.signalMixLayout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:center;min-height:260px}
.signalMixChart{display:grid;justify-items:center;gap:13px}
.signalMixDonut{width:220px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 16px 34px color-mix(in srgb,var(--text) 12%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
.signalMixDonut:after{content:"";position:absolute;inset:24%;border-radius:50%;background:var(--panel);box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
.signalMixDonutCenter{position:relative;z-index:2;text-align:center;display:grid;gap:5px}
.signalMixDonutCenter strong{font-size:34px;line-height:1;color:var(--text);letter-spacing:-.035em}
.signalMixDonutCenter span{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.signalMixLead{margin:0;max-width:240px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
.signalMixLead b{color:var(--green)}
.signalMixRows{display:grid;gap:11px}
.signalMixRow{display:grid;grid-template-columns:minmax(145px,1.1fr) minmax(180px,2fr) 64px 78px;gap:12px;align-items:center;min-height:28px;font-size:14px}
.signalMixName{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text);font-weight:650}
.signalMixName i{width:12px;height:12px;border-radius:4px;flex:0 0 auto;box-shadow:0 0 10px color-mix(in srgb,var(--text) 8%,transparent)}
.signalMixName span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signalMixTrack{height:10px;border-radius:999px;background:var(--panel2);overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.signalMixTrack span{display:block;height:100%;border-radius:999px}
.signalMixRow>b{text-align:right;color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
.signalMixRow>small{text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.marketHeatLegend{margin-bottom:12px!important}
.marketHeatLegendSort{margin-left:auto;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.marketHeatGrid{align-content:start}

@media(max-width:760px){
  .signalMixLayout{grid-template-columns:1fr;gap:22px;min-height:0}
  .signalMixDonut{width:min(230px,70vw)}
  .signalMixRow{grid-template-columns:minmax(105px,1.1fr) minmax(85px,1.4fr) 52px;gap:8px;font-size:12px}
  .signalMixRow>small{display:none}
  .signalMixRow>b{font-size:12px}
  .signalMixName i{width:10px;height:10px}
  .marketHeatLegendSort{display:none}
}

/* Structural invariants: charts must retain their intended geometry after late style updates. */
#demandVisuals #homeMix .signalMixDonut{
  display:grid;place-items:center;flex:none;
  width:220px;height:220px;aspect-ratio:1 / 1;
  border-radius:50%;overflow:hidden;
}
#demandVisuals #homeMix .signalMixDonut::after{border-radius:50%}
#demandVisuals #homeHeat .marketHeatGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));
  gap:4px;align-items:start;align-content:start;
}
#demandVisuals #homeHeat .marketHeatCell{
  display:grid;place-items:center;width:100%;height:auto;
  aspect-ratio:1 / 1;min-height:0;border-radius:7px;
}
@media(max-width:760px){
  #demandVisuals #homeMix .signalMixDonut{width:min(230px,70vw);height:auto;aspect-ratio:1 / 1}
  #demandVisuals #homeHeat .marketHeatGrid{grid-template-columns:repeat(auto-fit,minmax(34px,1fr))}
}