/* Nessun colore scritto qui: solo i ruoli definiti in theme.css. */

*, *::before, *::after { box-sizing: border-box; }

/* Senza questa riga, un `display` scritto nel CSS vince sull'attributo
 * `hidden`: il messaggio d'errore del grafico restava steso sopra le celle,
 * invisibile, e si mangiava rotella, trascinamento e passaggio del mouse. */
[hidden] { display: none !important; }

/* Lo spazio della barra di scorrimento e' sempre riservato: senza, la barra
 * compariva DOPO il disegno del grafico (la pagina si allunga), toglieva
 * 15 px di larghezza, e le celle di destra finivano sotto la cornice. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  padding: 0 var(--page-pad) var(--page-pad);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.3;
}

a { color: inherit; }
button, input { font: inherit; color: inherit; }

/* ---------- Testata ---------- */

/* Tre colonne: marchio a sinistra, selettore Usage/History al centro della
 * pagina, ricerca a destra. Le due colonne laterali sono uguali (1fr), cosi'
 * il selettore resta centrato qualunque sia la larghezza di marchio e
 * ricerca. */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 32px;
  padding: 18px 0 14px;
  border-bottom: 2px solid var(--rule);
}
.top .search { justify-self: end; }

.brand { display: flex; align-items: baseline; gap: 0 18px; flex-wrap: wrap; }
.title { margin: 0; font-size: var(--fs-title); font-weight: 400; letter-spacing: -0.01em; line-height: 1; }
/* Il logo non ha discendenti: il suo bordo basso e' la linea di base, e si
 * allinea a quella del sottotitolo. 22 px su un portatile, poi cresce con
 * il titolo. */
.title .logo { display: block; height: calc(var(--fs-title) * 1.1); width: auto; }
.tagline { margin: 0; font-size: var(--fs-tagline); }

/* Due livelli di selettore, due disegni.
 *   principale (Usage/History): pieno chiaro, voce attiva scura;
 *   secondario (All models/By provider, periodo di History): contorno
 *   chiaro su fondo scuro, voce attiva piena chiara — il negativo del
 *   principale, cosi' non si confondono. */
.toggle, .seg {
  display: flex;
  padding: 3px;
  border-radius: 9px;
}
.toggle { background: var(--fg); }
.seg { border: 1.5px solid var(--fg); padding: 2px; }
.toggle-item, .seg-item {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: var(--fs-toggle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}
.toggle-item { color: var(--bg); }
.toggle-item.is-active { background: var(--bg); color: var(--fg); }
.seg-item { color: var(--fg); }
.seg-item.is-active { background: var(--fg); color: var(--bg); }

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(200px, 14.5vw, 372px);
  height: calc(var(--fs-toggle) + 19px);
  border-radius: 9px;
  background: var(--fg);
  color: var(--bg);
}
.search-icon {
  position: absolute;
  left: 11px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.search input {
  width: 100%;
  height: 100%;
  padding: 0 12px 0 34px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--bg);
  font-size: var(--fs-bar);
  outline: none;
}
.search input::placeholder { color: var(--cell-fg-muted); }
.search:focus-within { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }

/* ---------- Barra del dato: finestra e orario sono obbligo di licenza ---------- */

.databar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px clamp(18px, 1.6vw, 40px);
  padding: 14px 0;
  font-size: var(--fs-bar);
}
.databar .k { color: var(--fg-muted); font-weight: 300; }
.databar .spacer { flex: 1; }
.databar .stale { color: var(--fg); }
.databar .stale::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--down);
  vertical-align: 0.08em;
}

/* ---------- Pubblicita': formati IAB standard ----------
 * 970x90 (large leaderboard) su schermi larghi, 728x90 (leaderboard) sui
 * medi, 320x50 (mobile banner) sui telefoni. La misura si tiene riservata
 * anche prima che arrivi l'annuncio, cosi' la pagina non salta. */

.ad { display: flex; justify-content: center; margin: 4px 0 0; }
.ad-bottom { margin: 0; }
body[data-ads="off"] .ad { display: none; }

.ad-slot {
  position: relative;
  width: 970px;
  height: 90px;
  max-width: 100%;
  background: var(--ad-fill);
}
.ad-slot::after {
  content: "Advertisement · 970 × 90";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
@media (max-width: 1040px) {
  .ad-slot { width: 728px; }
  .ad-slot::after { content: "Advertisement · 728 × 90"; }
}
@media (max-width: 767px) {
  .ad-slot { width: 320px; height: 50px; }
  .ad-slot::after { content: "Advertisement · 320 × 50"; }
}

/* ---------- Grafico ---------- */

/* Sopra il grafico: comandi a sinistra, il pulsante giallo (Reset view,
 * Clear selection) a destra. Altezza minima fissa: il pulsante compare e
 * scompare senza far saltare la pagina. */
.chart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-top: 18px;
}
/* Sotto il grafico, a destra: la nota su cosa si sta guardando. */
.chart-note {
  margin: 8px 2px 18px;
  text-align: right;
  color: var(--fg-muted);
  font-size: var(--fs-tagline);
}
.only-mobile { display: none; }

/* La cornice e' anche il ritaglio dello zoom: ingrandendo, le celle
 * scorrono sotto il bordo arrotondato invece di uscire dal grafico. */
.chart {
  position: relative;
  margin: 12px 0 0;
  padding: var(--frame-pad);
  border: var(--frame-width) solid var(--frame);
  border-radius: var(--frame-radius);
  overflow: hidden;
}
#treemap { display: block; width: 100%; }
.chart.is-zoomed #treemap { cursor: grab; }
.chart.is-zoomed #treemap:active { cursor: grabbing; }

.cell-shape { fill: var(--cell); transition: fill 0.12s; }
.cell { cursor: pointer; transition: opacity 0.18s; }
.cell:hover .cell-shape, .cell.is-focus .cell-shape { fill: var(--cell-hover); }
/* Selezionata: gialla finche' resta selezionata (dopo l'hover, cosi' vince). */
.cell.is-sel .cell-shape { fill: var(--sel); }
/* Esclusi dalla ricerca: attenuati ma leggibili. Al 18% erano quasi neri. */
.cell.is-dim { opacity: 0.45; }
.label.is-dim { opacity: 0.6; }

.group-line {
  fill: none;
  stroke: var(--group-line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* Un rettangolo del colore della pagina, sopra la linea: la interrompe dove
 * sta il testo. (Con `fill: none`, rimasto dalla versione Voronoi, la linea
 * passava in mezzo alle lettere.) */
.group-label-bg { fill: var(--bg); stroke: none; }
/* Niente font-size qui: lo imposta app.js, diviso per lo zoom. Una regola
 * CSS vincerebbe sull'attributo e l'etichetta crescerebbe con il grafico. */
.group-label { fill: var(--fg); }
.group.is-dim { opacity: 0.3; }

.label { pointer-events: none; transition: opacity 0.18s; }
/* Durante le animazioni l'opacita' la scrive app.js a ogni fotogramma. */
#treemap.is-animating .cell, #treemap.is-animating .label { transition: none; }
/* I pezzi di una riga si posizionano dal bordo sinistro (la riga intera e'
 * centrata dal codice); solo il testo dei badge si centra nel suo riquadro. */
.label text { fill: var(--cell-fg); text-anchor: start; }
.label .b-text { text-anchor: middle; }
.label .l-head  { font-weight: 600; }
.label .l-qual  { font-weight: 400; }
.label .l-vol   { font-weight: 400; }
.label .l-delta { font-weight: 600; }
.label .l-delta .up   { fill: var(--up); }
.label .l-delta .down { fill: var(--down); }
.label .l-delta .new  { fill: var(--cell-fg); }   /* pallino di «new»: colore del testo */
/* Sul giallo il verde non si legge: nelle celle selezionate frecce e
 * pallino prendono il colore del testo. La direzione la dice gia' il segno. */
.label.is-sel .l-delta .up, .label.is-sel .l-delta .down { fill: var(--cell-fg); }
.label .b-rect { fill: var(--cell-fg); }
.label .b-text {
  fill: var(--cell);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Il pulsante per tornare indietro (Reset view, Clear selection): compare
 * solo quando c'e' qualcosa da azzerare. Contorno e testo gialli su fondo
 * scuro: pieno si confondeva con le etichette dei modelli evidenziate, che
 * sono pillole gialle piene. All'hover si riempie. */
.btn-reset {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--reset-line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--reset-line);
  font-size: var(--fs-toggle);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.btn-reset:hover { background: var(--reset-line); color: var(--bg); }
.chart-actions { display: flex; gap: 8px; margin-left: auto; }

/* Schede dei modelli selezionati: come il tooltip, ma restano aperte, si
 * possono chiudere, e hanno il bordo giallo della loro cella. */
.tooltip.card { pointer-events: auto; border-color: var(--sel); z-index: 4; }
.card-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.card-x:hover { color: var(--sel); }
.btn-reset:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; }
/* La × segue il colore del testo, anche nel cambio all'hover. */
.btn-x {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.hint-zoomed { display: none; }
body.is-zoomed .hint-idle { display: none; }
body.is-zoomed .hint-zoomed { display: inline; }

.tooltip {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  max-width: 280px;
  padding: 12px 14px;
  border: 1.5px solid var(--fg);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  pointer-events: none;
}
.tooltip .t-provider { color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.tooltip .t-name { margin: 2px 0 8px; font-size: 17px; font-weight: 600; line-height: 1.2; }
.tooltip .t-name .q { font-weight: 400; }
.tooltip .t-badges { display: flex; gap: 5px; margin-bottom: 8px; }
.tooltip .t-badges:empty { display: none; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.tooltip .t-row .k { color: var(--fg-muted); }
.tooltip .up { color: var(--up); }
.tooltip .down { color: var(--down); }

.chart-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-bar);
}

/* ---------- History ---------- */

#bump { display: block; width: 100%; }
body[data-view="history"] .usage-only { display: none; }

.hist-grid line { stroke: var(--grid); stroke-width: 1; }
.hist-axis text { fill: var(--fg); }
.hist-rank { text-anchor: end; }
.hist-date { text-anchor: middle; fill: var(--fg-muted); }

/* Ogni linea e' disegnata due volte: sotto una guaina del colore di fondo,
 * piu' larga, e sopra il tratto. All'incrocio la linea che passa sopra
 * stacca con un filo scuro e si capisce quale prosegue dove. */
.bump-casing, .bump-stroke, .bump-hit { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bump-casing { stroke: var(--bg); }
.bump-stroke { stroke: var(--line); transition: stroke 0.12s; }
.bump-hit { stroke: transparent; pointer-events: stroke; cursor: pointer; }
.bump-line { transition: opacity 0.15s; }
.bump-line.is-dim { opacity: 0.28; }
.bump-overlay { pointer-events: none; }
.bump-overlay .bump-hot { stroke: var(--line-hot); }

.hist-label { cursor: pointer; transition: opacity 0.15s; }
.hist-label-bg { fill: var(--cell); transition: fill 0.12s; }
.hist-label-text { fill: var(--cell-fg); }
.hist-label-text .h { font-weight: 600; }
.hist-label-text .q { font-weight: 400; }
.hist-label .b-rect { fill: var(--cell-fg); }
.hist-label .b-text { fill: var(--cell); font-family: var(--font-mono); letter-spacing: 0.04em; text-anchor: middle; }
.hist-label.is-hot .hist-label-bg { fill: var(--line-hot); }
.hist-label.is-dim { opacity: 0.28; }


/* ---------- Metodologia e privacy ---------- */

/* La legenda delle celle non serve fuori da Usage. */
body[data-view="methodology"] .usage-only { display: none; }

.method-text {
  max-width: 68ch;
  margin: 28px 0 40px;
  font-size: var(--fs-ui);
  line-height: 1.6;
}
.method-text h2 { margin: 0 0 16px; font-size: var(--fs-title); font-weight: 400; letter-spacing: -0.01em; }
.method-text h2 + p { margin-top: 0; }
.method-text h2:not(:first-child) { margin-top: 48px; padding-top: 28px; border-top: var(--frame-width) solid var(--rule); }
.method-text h3 { margin: 32px 0 8px; font-size: var(--fs-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.method-text p, .method-text li { color: var(--fg); }
.method-text ul { margin: 0; padding-left: 1.2em; }
.method-text li { margin: 0 0 8px; }
.method-text li::marker { color: var(--fg-muted); }
.method-text strong { font-weight: 600; }
.method-text a { color: var(--fg); }
/* L'attribuzione citata: la stessa frase del piede, messa in evidenza. */
.method-quote {
  padding: 12px 16px;
  border: var(--frame-width) solid var(--frame);
  border-radius: var(--frame-radius);
}

/* ---------- Piede ---------- */

.foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid var(--rule);
  font-size: var(--fs-ui);
  color: var(--fg-muted);
}
.legend, .coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.coverage { margin-top: 10px; }
.coverage b { color: var(--fg); font-weight: 600; }
.coverage .spacer { flex: 1; }
.coverage a { color: var(--fg); }
/* L'attribuzione non si spezza: andando a capo a meta', la data finiva
 * sulla riga sotto, fuori dallo schermo, e la frase sembrava monca. Se non
 * c'e' posto, scende intera sulla riga successiva. Sul telefono non ci sta
 * in nessuna riga: li' va a capo, ma "as of" resta attaccato alla data. */
.coverage .attribution { color: var(--fg-muted); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 18px; height: 12px; border-radius: 4px; background: var(--cell); }
.tri.up { color: var(--up); }
.tri.down { color: var(--down); margin-left: -4px; }
.tri.new { color: var(--fg); }

.badge {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ---------- Telefono ---------- */

@media (max-width: 767px) {
  /* Sul telefono ogni pixel di larghezza conta: la cornice resta, ma il suo
   * margine interno si riduce al minimo. */
  :root { --frame-pad: 4px; }
  /* Sul telefono tre colonne non ci stanno: marchio sopra, selettore e
   * ricerca affiancati sotto. */
  .top { padding-top: 14px; grid-template-columns: auto 1fr; }
  .top .brand { grid-column: 1 / -1; }
  .top .search { justify-self: stretch; width: auto; }
  .databar .spacer { display: none; }
  .coverage .attribution { white-space: normal; }
  .only-desktop, body.is-zoomed .only-desktop { display: none; }
  .only-mobile { display: inline; }
  .chart-bar { flex-wrap: wrap; }
}