/* Gerarchia da cruscotto (25/10): ogni pannello apre con il titolo condensato e il numero chiave grande
   (keyFigure di dom.js), poi i grafici, poi le frasi. Sofia Sans Condensed 800, cifre tabulari; le parole
   sotto il numero a 16 px. Colori solo dai token --brand-*. */
.panel {
  container-type: inline-size;
}
.panel-head {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 32px;
}
.key-figure {
  display: grid;
  gap: 6px;
  margin: 10px 0 6px;
  align-content: start;
}
.key-figure strong {
  font-family: var(--brand-font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.key-figure span {
  font-size: var(--s16);
  color: var(--brand-muted);
  max-width: 28ch;
}
.key-figure.tone-accent strong {
  color: var(--brand-accent);
  text-shadow: 0 0 18px var(--glow);
}
.key-figure.tone-up strong {
  color: var(--brand-up);
}
.key-figure.tone-risk strong {
  color: var(--brand-risk);
}
.key-figure.tone-up,
.key-figure.tone-risk,
.key-figure.tone-accent {
  color: inherit;
}
/* Un pannello largo: il numero a destra del titolo, più grande, a colpo d'occhio. */
@container (min-width: 520px) {
  .panel-head:has(.key-figure) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .panel-head .key-figure {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    justify-items: end;
    text-align: right;
  }
  .key-figure strong {
    font-size: var(--s52);
  }
}
/* Nelle righe: il titolo e il numero in testa, le frasi come didascalia (16 px, colore secondario). */
.panel li p {
  font-size: var(--s16);
}
.panel li p:not([class]),
.sector-row .sentence,
.pattern .format-line {
  color: var(--brand-muted);
}
.sector-head .change {
  font-size: 36px;
}
.sector-head .name {
  font-size: 20px;
}
/* «Mostra tutti», «Mostra le note»: il bottone secondario allineato al testo, alto 44 px. */
.btn.more {
  min-height: 44px;
  margin: 4px 0 0 -20px;
}
.signal-type .tag-market {
  margin: 0 8px 0 0;
}