/* «Chi cresce e chi rallenta» (S05, 24/10): una riga per settore con il valore in grande, la barra
   divergente (calo a sinistra, crescita a destra), la frase e la curva; gli stabili in grigio, senza barra.
   Solo token --brand-*, testo a 16 px o più. */
.sector-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--soft);
}
.sector-row > :not(.spark) {
  grid-column: 1;
}
.sector-row .spark {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
}
.sector-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sector-head .change {
  font-size: var(--s28);
  line-height: 1;
}
.sector-head .name {
  font-size: var(--s18);
  font-weight: 600;
}
.dir-up .change {
  color: var(--brand-up);
}
.dir-down .change {
  color: var(--brand-down);
}
.dir-stable,
.dir-stable .change,
.dir-insufficient,
.dir-insufficient .change {
  color: var(--brand-muted);
}
.sector-row p {
  margin: 0;
}
.div-bar {
  position: relative;
  height: 10px;
  border-radius: 0;
  background: color-mix(in srgb, var(--brand-line) 35%, transparent);
}
.div-bar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--brand-muted);
}
.div-bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0;
}
.dir-up .div-bar .fill {
  background: var(--brand-up);
}
.dir-down .div-bar .fill {
  background: var(--brand-down);
}
@media (max-width: 760px) {
  .sector-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .sector-row .spark {
    grid-column: 1;
    grid-row: auto;
  }
}