/* Cruscotto di Marketing Pulse (S05): layout, testata, filtro, pannello, pulsanti, gate, pagina del giorno.
   Colori e font solo dai token di brand.css (generato da brand/brand.json, design system di MH dal 24/10:
   Sofia Sans Condensed per titoli e numeri, Sofia Sans per tutto il resto; il fondo scuro è quello
   della sala di controllo, teal scuro con il bagliore verde). Testo a 16 px o più, scala 16 / 18 / 22 / 28 / 40 / 52;
   12 colonne sul desktop, una colonna sotto 760 px. */
:root {
  --s16: 16px;
  --s18: 18px;
  --s22: 22px;
  --s28: 28px;
  --s40: 40px;
  --s52: 52px;
  --gap: 28px;
  --radius: 0;
  --soft: var(--brand-line);
  --glow: transparent;
  /* Movimento del sito di MH: rivela 720 ms, in sequenza ogni 120 ms; hover 200-260 ms. */
  --ease-rivela: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-volo: cubic-bezier(0.65, 0, 0.35, 1);
  /* Tema chiaro di partenza (S08): il design system di MH a casa sua. Carta, inchiostro, schede bianche
     che si staccano dalla carta con un'ombra bassa, senza bordo; niente bagliore. */
  --card-top: var(--brand-paper);
  --card-edge: transparent;
  --shadow:
    0 1px 2px color-mix(in srgb, var(--brand-text) 8%, transparent),
    0 16px 32px -20px color-mix(in srgb, var(--brand-text) 40%, transparent);
  color-scheme: light;
}
/* Tema scuro, secondario (interruttore «Tema scuro», public/theme.js): la sala di controllo. Schede appena
   sollevate dal fondo teal, con un velo verde in alto, un filetto sottile, un'ombra bassa e il bagliore. */
[data-brand-theme='dark'] {
  color-scheme: dark;
  --glow: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  --card-top: color-mix(in srgb, var(--brand-paper) 90%, var(--brand-accent));
  --card-edge: color-mix(in srgb, var(--brand-line) 70%, transparent);
  --shadow:
    inset 0 1px 0 color-mix(in srgb, var(--brand-accent) 10%, transparent),
    0 18px 36px -22px color-mix(in srgb, black 90%, transparent);
}
* {
  box-sizing: border-box;
}
html {
  background: var(--brand-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--brand-text);
  font-family: var(--brand-font-body);
  font-size: var(--s18);
  line-height: 1.5;
  font-weight: 400;
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(
      900px 500px at -10% 30%,
      color-mix(in srgb, var(--glow) 45%, transparent),
      transparent 60%
    ),
    var(--brand-bg);
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
h3 a,
.rank-list a,
.source-list a,
.map-news a {
  text-decoration-color: var(--brand-line);
}
h3 a:hover,
.rank-list a:hover,
.source-list a:hover,
.map-news a:hover {
  text-decoration-color: currentColor;
}
/* Titoli e numeri grandi: Sofia Sans Condensed 800, maiuscolo, interlinea .9, cifre tabulari. I titoli
   delle righe (h3: prodotti, temi, notizie) restano in Sofia Sans 700 e in minuscolo: leggibili. */
h1,
h2,
.product,
.ticker .v,
.number strong,
.hud-number strong,
.sector-head .change,
.theme-row .rank,
.rank-list .rank,
.fx .value {
  font-family: var(--brand-font-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
h1,
h2,
.product {
  text-transform: uppercase;
}
h1,
h2,
h3 {
  margin: 0;
}
h3 {
  font-family: var(--brand-font-body);
  font-weight: 700;
  line-height: 1.25;
}
h1 {
  font-size: var(--s40);
}
h2 {
  font-size: 32px;
}
h3 {
  font-size: var(--s22);
}
p {
  margin: 0;
}
/* Sotto un titolo: il tipo di una riga, il giorno della hero, il titoletto di una parte della scheda. */
.signal-type,
.hud-day,
.block-title {
  font-size: var(--s16);
  font-weight: 600;
  color: var(--brand-muted);
}
.block-title {
  color: var(--brand-text);
}
.hint,
.meta,
.source-note {
  color: var(--brand-muted);
  font-size: var(--s16);
}
.source-note {
  font-family: var(--brand-font-mono);
}

/* Testata e ticker */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 28px;
  padding: 12px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--soft);
}
.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  text-decoration: none;
  color: var(--brand-text);
}
/* Il logo MH /intelligence: la variante con MH in inchiostro sulla carta, quella con MH bianco sullo scuro. */
.brand .logo {
  height: 32px;
  width: auto;
}
.logo-on-dark,
[data-brand-theme='dark'] .logo-on-light {
  display: none;
}
[data-brand-theme='dark'] .logo-on-dark {
  display: block;
}
.product {
  font-size: var(--s28);
}
.updated {
  font-family: var(--brand-font-mono);
  font-size: var(--s16);
  color: var(--brand-muted);
  text-align: right;
  justify-self: end;
}
.top .ticker {
  grid-column: 1 / -1;
  grid-row: 2;
  /* Il posto dei valori prima che arrivi il giorno: la pagina non salta (CLS). */
  min-height: 24px;
}
.ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticker li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ticker .k {
  font-family: var(--brand-font-mono);
  font-size: var(--s16);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
}
.ticker .v {
  font-size: var(--s22);
}

/* Filtro */
.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--brand-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--soft);
}
.filters:empty {
  display: none;
}
.filter-note {
  font-size: var(--s16);
  color: var(--brand-muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Griglia e pannello */
main {
  display: grid;
  gap: var(--gap);
  padding: var(--gap) clamp(16px, 3vw, 40px) 40px;
  max-width: 1720px;
  margin: 0 auto;
}
.row {
  display: grid;
  align-items: stretch;
  grid-template-columns: var(--cols, 1fr);
  gap: var(--gap);
  min-width: 0;
}
.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  /* Scheda sollevata: velo in alto, filetto sottile, ombra bassa; entra in sequenza (--i da mountRows). */
  background: linear-gradient(180deg, var(--card-top), var(--brand-paper) 160px);
  border: 1px solid var(--card-edge);
  border-radius: 0;
  box-shadow: var(--shadow);
  animation: rise 0.72s var(--ease-rivela) calc(var(--i, 0) * 120ms) both;
}
.panel-head {
  display: grid;
  gap: 6px;
}
.panel-head h2 {
  max-width: 34ch;
}
.panel-brag {
  align-items: flex-start;
}
.empty {
  align-items: flex-start;
}
.loading {
  font-size: var(--s22);
  color: var(--brand-muted);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    animation: none;
  }
  *,
  *::before {
    transition: none !important;
  }
}

/* Pagina del giorno e passaggio da /giorno/… */
.day-head {
  display: grid;
  gap: 10px;
}
.day-nav {
  display: flex;
  gap: 10px;
}
.archive ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}
.giorno-pass {
  max-width: 720px;
  margin: 10vh auto;
  padding: 0 20px;
  display: grid;
  gap: 16px;
}
.foot {
  padding: 24px clamp(16px, 3vw, 40px) 40px;
  color: var(--brand-muted);
  font-size: var(--s16);
  max-width: 1100px;
}

@media (max-width: 760px) {
  .top {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  /* Sul telefono il ticker tiene due valori: i numeri del giorno sono nella hero. */
  .ticker li:nth-child(n + 3) {
    display: none;
  }
  .updated {
    text-align: left;
    justify-self: start;
  }
  .brand .logo {
    height: 26px;
  }
  .product {
    font-size: var(--s22);
  }
  .row {
    grid-template-columns: 1fr;
  }
  h1 {
    font-size: var(--s28);
  }
  h2 {
    font-size: var(--s28);
  }
  .ticker .v {
    font-size: var(--s22);
  }
  /* Il selettore dei mercati resta sempre visibile (Pietro, 23/10): sul telefono in alto, in una riga
     sola che scorre di lato dentro la barra (la pagina non scorre di lato). */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px 16px;
    padding: 10px 16px;
  }
  .filters .chips {
    flex-wrap: nowrap;
  }
  .filters .chip,
  .filter-note {
    flex: none;
  }
}