/* ============================================================
   synergy-compare.css — pannello di confronto fasi, layout
   "numeri-first con scala condivisa per riga" (mockup 4a).
   Sostituisce le regole di layout del confronto in
   css/synergy.css; vedi integrazione/README.md per l'elenco
   esatto dei selettori da rimuovere.

   Da linkare in index.html DOPO css/synergy.css:
     <link rel="stylesheet" href="css/synergy-compare.css">

   Tutto è scoped sotto .synergy-tab e usa i token --s-* già
   definiti da synergy.css (che a loro volta aliasano theme.css):
   light/dark segue .dark-mode senza regole doppie.

   Unica eccezione, deliberata: dove la tinta dell'allenamento fa
   da INCHIOSTRO (numeri di fase B, occhielli, la select destra)
   si usa --nl-train e non --s-train. --s-train aliasa
   --nl-train-light (#6c9a78 in chiaro), che come riempimento va
   benissimo ma come testo sta a 3.08:1 sul fondo chiaro;
   --nl-train (#5a8466) sta a 4.08:1. Nessuno dei due arriva ad
   AA (4.5:1) e la fase A, con --s-nutri, sta a 6.95:1: in chiaro
   i numeri delle due fasi NON hanno la stessa leggibilità. In
   scuro sono entrambi a posto (6.39:1 e 5.77:1). Il token è
   quello di tutta l'app (main.css lo usa per il testo
   allenamento ovunque), quindi la correzione è una decisione di
   palette e non di questo file: servirebbe un verde inchiostro
   più profondo — #537a5e, stessa tinta, 4.66:1 — da introdurre
   in theme.css accanto a --nl-train, non solo qui.
   Le uniche misure che arrivano dal renderer sono le larghezze
   e le posizioni delle barre, inline, perché sono dati e non
   stile.

   Le tre costanti del layout, da non tradire nelle modifiche:
   1. le colonne numeriche hanno larghezza fissa e cifre
      tabulari — è quello che rende la lettura verticale;
   2. la riga ha un'altezza minima sola (62px, 84px dentro i
      gruppi aperti dove c'è la sparkline): niente elemento che
      la faccia crescere solo su alcune righe;
   3. il binario a destra vive in una cella propria e misura
      SOLO dentro la riga: fra righe non si confronta nulla,
      per quello c'è la colonna Δ/soglia.
   ============================================================ */

/* ---------- contenitore ---------- */
.synergy-tab .sa-compare-panel { padding: 0; overflow: hidden; gap: 0; }
.synergy-tab .sa-compare { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; }
.synergy-tab .sa-compare__notice { margin: 14px 24px 0; margin-bottom: 15px; }

/* ---------- intestazione + picker ---------- */
.synergy-tab .sa-compare-picker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--s-surface-3); border: none;
  border-bottom: 1px solid var(--s-border); border-radius: 0; padding: 18px 24px;
}
.synergy-tab .sa-compare-picker__title {
  margin: 0; font-family: var(--s-display); font-size: 17px; font-weight: 600; color: var(--s-ink);
}
.synergy-tab .sa-compare-picker__mode {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-ink-3); border: 1px solid var(--s-border); border-radius: 20px; padding: 5px 11px;
}
.synergy-tab .sa-compare-picker__slots { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.synergy-tab .sa-compare-picker__vs { font-size: 12px; color: var(--s-ink-3); }
.synergy-tab .sa-compare-picker__field { flex-direction: row; align-items: center; gap: 0; }
.synergy-tab .sa-compare-picker__field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.synergy-tab .sa-compare-picker__field select { min-width: 0; max-width: 240px; font-size: 13.5px; padding: 8px 10px; }
.synergy-tab .sa-compare-picker__field--left select { color: var(--s-nutri); border-color: color-mix(in srgb, var(--s-nutri) 50%, transparent); }
.synergy-tab .sa-compare-picker__field--right select { color: var(--nl-train); border-color: color-mix(in srgb, var(--s-train) 55%, transparent); }
.synergy-tab .sa-compare-picker .sa-btn { margin-left: 0; }

/* ---------- le due fasi + confrontabilità ---------- */
.synergy-tab .sa-compare__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 268px minmax(0, 1fr); gap: 0;
}
.synergy-tab .sa-compare__col {
  padding: 20px 24px; background: transparent; border: none; border-top: 3px solid var(--s-border);
  border-radius: 0; display: flex; flex-direction: column; gap: 7px;
}
/* il badge A/B tondo del layout a tabella non serve più: l'occhiello lo dice */
.synergy-tab .sa-compare__col::before { content: none; }
.synergy-tab .sa-compare__col[data-compare-side="left"] {
  text-align: right; align-items: flex-end; border-top-color: var(--s-nutri);
  background: linear-gradient(180deg, var(--s-nutri-soft), transparent 78px);
}
.synergy-tab .sa-compare__col[data-compare-side="right"] {
  border-top-color: var(--s-train);
  background: linear-gradient(180deg, var(--s-train-soft), transparent 78px);
}
.synergy-tab .sa-compare__eyebrow {
  margin: 0; font-family: var(--s-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.synergy-tab .sa-compare__col[data-compare-side="left"] .sa-compare__eyebrow { color: var(--s-nutri); }
.synergy-tab .sa-compare__col[data-compare-side="right"] .sa-compare__eyebrow { color: var(--nl-train); }
.synergy-tab .sa-compare__col h4 { margin: 0; font-family: var(--s-display); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--s-ink); }
.synergy-tab .sa-compare__meta { margin: 0; font-size: 13px; color: var(--s-ink-3); font-feature-settings: "tnum" 1; }
.synergy-tab .sa-compare__verdict {
  margin: 3px 0 0; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--s-display); font-size: 13px; font-weight: 700;
  border-radius: 20px; padding: 5px 12px; background: var(--s-surface-3);
}
.synergy-tab .sa-compare__verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.synergy-tab .sa-compare__verdict--fuori_traiettoria { color: var(--s-critical); background: color-mix(in srgb, var(--s-critical) 13%, transparent); }
.synergy-tab .sa-compare__verdict--da_monitorare { color: var(--s-warning); background: color-mix(in srgb, var(--s-warning) 13%, transparent); }
.synergy-tab .sa-compare__verdict--in_linea { color: var(--s-positive); background: color-mix(in srgb, var(--s-positive) 14%, transparent); }
.synergy-tab .sa-compare__verdict--dati_insufficienti { color: var(--s-ink-3); }

/* corridoio: non più il Δ di una metrica, ma se le due fasi si possono
   confrontare — durata, copertura e il promemoria che il confronto è
   descrittivo. È la seconda domanda a cui il pannello deve rispondere
   entro due secondi. */
.synergy-tab .sa-compare__gutter {
  padding: 18px 20px; background: var(--s-surface-3); border-top: 3px solid var(--s-border);
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
}
.synergy-tab .sa-compare__gutter-label {
  font-family: var(--s-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--s-ink-3);
}
.synergy-tab .sa-compare__fact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--s-ink-3); }
.synergy-tab .sa-compare__fact b { font-family: var(--s-display); font-size: 13px; font-weight: 700; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
.synergy-tab .sa-compare__gutter-note { font-size: 11.5px; line-height: 1.4; color: var(--s-ink-3); }

/* ---------- catena energetica: due schede su scala condivisa ---------- */
.synergy-tab .sa-chain {
  display: flex; flex-direction: column; gap: 15px; padding: 22px 24px;
  background: var(--s-surface-3);
  border-top: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border);
  width: auto; margin: 0;
}
.synergy-tab .sa-chain__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.synergy-tab .sa-chain__caption {
  margin: 0; font-family: var(--s-display); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; text-transform: none; color: var(--s-ink); padding: 0;
}
.synergy-tab .sa-chain__legend { font-size: 12.5px; line-height: 1.5; color: var(--s-ink-3); max-width: 78ch; text-wrap: pretty; }
.synergy-tab .sa-chain__cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 216px; gap: 16px; align-items: stretch; }
.synergy-tab .sa-chain__card {
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
  padding: 16px 18px; background: var(--s-surface); border-radius: var(--s-r-md);
  border-left: 3px solid var(--s-border);
}
.synergy-tab .sa-chain__card--a { border-left-color: var(--s-nutri); }
.synergy-tab .sa-chain__card--b { border-left-color: var(--s-train); }
.synergy-tab .sa-chain__eyebrow { font-family: var(--s-display); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.synergy-tab .sa-chain__card--a .sa-chain__eyebrow { color: var(--s-nutri); }
.synergy-tab .sa-chain__card--b .sa-chain__eyebrow { color: var(--nl-train); }
.synergy-tab .sa-chain__steps { font-size: 14.5px; line-height: 1.45; color: var(--s-ink-2); font-feature-settings: "tnum" 1; }
.synergy-tab .sa-chain__steps b { color: var(--s-ink); font-weight: 600; }
.synergy-tab .sa-chain__method { font-size: 12.5px; font-weight: 500; color: var(--s-ink-3); }
.synergy-tab .sa-chain__bar {
  position: relative; display: block; height: 24px; border-radius: 6px;
  background: color-mix(in srgb, var(--s-ink-3) 20%, transparent);
}
.synergy-tab .sa-chain__planned { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; min-width: 2px; }
.synergy-tab .sa-chain__card--a .sa-chain__planned { background: var(--s-nutri); }
.synergy-tab .sa-chain__card--b .sa-chain__planned { background: var(--s-train); }
.synergy-tab .sa-chain__gap {
  position: absolute; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(135deg, var(--s-ink-2) 0 3px, transparent 3px 7px);
  opacity: .55;
}
.synergy-tab .sa-chain__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--s-ink-2); }
.synergy-tab .sa-chain__result-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.synergy-tab .sa-chain__result { font-family: var(--s-display); font-size: 22px; font-weight: 700; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.synergy-tab .sa-chain__note { font-size: 13px; color: var(--s-ink-3); font-feature-settings: "tnum" 1; }
.synergy-tab .sa-chain__delta {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 16px 18px; background: var(--s-surface-2); border-radius: var(--s-r-md);
}
.synergy-tab .sa-chain__delta-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-ink-3); }
/* mai colorato per direzione: il colore semantico resta al verdetto di fase */
.synergy-tab .sa-chain__delta-value { font-family: var(--s-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.synergy-tab .sa-chain__delta-note { font-size: 13px; line-height: 1.4; color: var(--s-ink-3); }

/* ---------- corpo: legenda + blocchi ---------- */
.synergy-tab .sa-compare__body { display: flex; flex-direction: column; gap: 22px; padding: 22px 24px; }
.synergy-tab .sa-cmp-legend {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--s-surface-2); border-radius: 10px;
}
.synergy-tab .sa-cmp-legend__title { font-family: var(--s-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-ink-2); }
.synergy-tab .sa-cmp-legend__key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--s-ink-3); }
.synergy-tab .sa-cmp-legend__swatch { width: 22px; height: 9px; border-radius: 3px; background: var(--s-ink-3); flex: 0 0 auto; }
.synergy-tab .sa-cmp-legend__swatch--a { background: var(--s-nutri); }
.synergy-tab .sa-cmp-legend__swatch--b { background: var(--s-train); }
.synergy-tab .sa-cmp-legend__swatch--over {
  background: var(--s-train);
  background-image: repeating-linear-gradient(135deg, var(--s-surface) 0 2px, transparent 2px 5px);
}
.synergy-tab .sa-cmp-legend__swatch--split { width: 1px; height: 16px; border-radius: 0; background: var(--s-ink-2); }
.synergy-tab .sa-cmp-legend__note { font-size: 12px; line-height: 1.45; color: var(--s-ink-3); }

.synergy-tab .sa-compare-block { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.synergy-tab .sa-compare-block + .sa-compare-block { border-top: 1px solid var(--s-border); padding-top: 22px; }
.synergy-tab .sa-compare-block__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.synergy-tab .sa-compare-block__title { margin: 0; font-family: var(--s-display); font-size: 15px; font-weight: 700; color: var(--s-ink); }
.synergy-tab .sa-compare-block__count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-3); }
.synergy-tab .sa-compare-block__hint { font-size: 12.5px; line-height: 1.5; color: var(--s-ink-3); max-width: 86ch; text-wrap: pretty; }

/* ---------- la tabella del confronto ---------- */
.synergy-tab .sa-cmp { display: flex; flex-direction: column; }
.synergy-tab .sa-cmp__head,
.synergy-tab .sa-cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 108px 122px 88px minmax(240px, 356px);
  align-items: center; column-gap: 0;
}
.synergy-tab .sa-cmp__head { align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--s-border); }
.synergy-tab .sa-cmp__th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-3); }
.synergy-tab .sa-cmp__th--num { text-align: right; }
.synergy-tab .sa-cmp__rail-head { padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.synergy-tab .sa-cmp__rail-head b { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-2); }
.synergy-tab .sa-cmp__rail-domain { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--s-ink-3); font-feature-settings: "tnum" 1; }

.synergy-tab .sa-cmp__row { min-height: 62px; border-top: 1px solid color-mix(in srgb, var(--s-border) 70%, transparent); }
/* l'intestazione porta già la sua riga di chiusura: la prima riga non ne aggiunge una seconda */
.synergy-tab .sa-cmp__head + .sa-cmp__row { border-top: none; }
.synergy-tab .sa-cmp__metric { font-size: 15px; font-weight: 600; color: var(--s-ink); padding-right: 12px; }
.synergy-tab .sa-cmp__unit { font-size: 12px; font-weight: 400; color: var(--s-ink-3); }
.synergy-tab .sa-cmp__val { text-align: right; font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.synergy-tab .sa-cmp__val--a { color: var(--s-nutri); }
.synergy-tab .sa-cmp__val--b { color: var(--nl-train); }
/* il Δ non è mai colorato per direzione: il confronto è descrittivo */
.synergy-tab .sa-cmp__delta { text-align: right; font-family: var(--s-display); font-size: 16.5px; font-weight: 700; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.synergy-tab .sa-cmp__ratio { text-align: right; font-family: var(--s-display); font-size: 13.5px; font-weight: 700; color: var(--s-ink-3); font-variant-numeric: tabular-nums; }
.synergy-tab .sa-cmp__reason { grid-column: 4 / -1; padding-left: 24px; font-size: 12.5px; color: var(--s-ink-3); }

.synergy-tab .sa-cmp__rail-cell { padding-left: 20px; padding-right: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.synergy-tab .sa-cmp__rail {
  position: relative; display: block; height: 32px; border-radius: 4px;
  background: color-mix(in srgb, var(--s-ink-3) 16%, transparent);
}
.synergy-tab .sa-cmp__bar { position: absolute; left: 0; height: 13px; border-radius: 3px; min-width: 2px; }
.synergy-tab .sa-cmp__bar--a { top: 2px; background: var(--s-nutri); }
.synergy-tab .sa-cmp__bar--b { top: 17px; background: var(--s-train); }
/* il Δ come geometria: il tratto della fase più alta che sporge oltre l'altra */
.synergy-tab .sa-cmp__over {
  position: absolute; height: 13px; border-radius: 0 3px 3px 0;
  background-image: repeating-linear-gradient(135deg, var(--s-surface) 0 2px, transparent 2px 5px);
  opacity: .85;
}
.synergy-tab .sa-cmp__over--a { top: 2px; }
.synergy-tab .sa-cmp__over--b { top: 17px; }
.synergy-tab .sa-cmp__split { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--s-ink-2); opacity: .55; }
.synergy-tab .sa-cmp__bar--absent {
  left: 0; right: 0; background-color: transparent;
  background-image: repeating-linear-gradient(135deg, var(--s-ink-3) 0 5px, transparent 5px 10px);
}
.synergy-tab .sa-cmp__row--limited .sa-cmp__metric,
.synergy-tab .sa-cmp__row--limited .sa-cmp__val { color: var(--s-ink-3); }
.synergy-tab .sa-cmp__row--limited .sa-cmp__bar { opacity: .3; }

/* dentro un gruppo aperto la riga porta anche la sparkline: l'altezza cresce
   una volta per tutte le righe del dettaglio, non riga per riga */
.synergy-tab .sa-cmp--detail .sa-cmp__row { min-height: 84px; }
.synergy-tab .sa-cmp--detail .sa-spark { height: 20px; width: 100%; }

/* ---------- coda: i gruppi entro soglia come chip ---------- */
.synergy-tab .sa-compare-groups { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--s-border); }
.synergy-tab .sa-compare-groups__label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-3); margin-right: 2px; }
.synergy-tab .sa-compare-group { margin: 0; }
.synergy-tab .sa-compare-group > summary {
  border-radius: 20px; padding: 8px 14px; background: var(--s-surface-2);
  border: 1px solid var(--s-border); font-size: 12.5px; font-weight: 600;
  color: var(--s-ink-2); white-space: nowrap; list-style: none; cursor: pointer;
}
.synergy-tab .sa-compare-group > summary::-webkit-details-marker { display: none; }
.synergy-tab .sa-compare-group[open] { flex: 1 1 100%; }
.synergy-tab .sa-compare-group[open] > summary { border-radius: var(--s-r-sm) var(--s-r-sm) 0 0; margin-bottom: 10px; }

/* ---------- < 1100px: cade il binario, restano i numeri ---------- */
@media (max-width: 1100px) {
  .synergy-tab .sa-cmp__head,
  .synergy-tab .sa-cmp__row { grid-template-columns: minmax(0, 1fr) 96px 96px 104px 76px; }
  .synergy-tab .sa-cmp__rail-head,
  .synergy-tab .sa-cmp__rail-cell { display: none; }
  .synergy-tab .sa-cmp__reason { grid-column: 4 / -1; }
  .synergy-tab .sa-chain__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .synergy-tab .sa-chain__delta { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
}

/* ---------- < 900px: le colonne si impilano ---------- */
@media (max-width: 900px) {
  .synergy-tab .sa-compare__grid { grid-template-columns: minmax(0, 1fr); }
  .synergy-tab .sa-compare__col[data-compare-side="left"] { text-align: left; align-items: flex-start; }
  .synergy-tab .sa-compare__gutter { border-top-width: 1px; padding: 14px 20px; }
  .synergy-tab .sa-chain__cards { grid-template-columns: minmax(0, 1fr); }
  .synergy-tab .sa-cmp__head { display: none; }
  .synergy-tab .sa-cmp__row { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 6px; padding: 14px 0; min-height: 0; }
  .synergy-tab .sa-cmp__metric { grid-column: 1 / -1; padding-right: 0; }
  /* senza intestazione le due colonne perderebbero il nome: torna sul valore */
  .synergy-tab .sa-cmp__val::before { content: attr(data-side); margin-right: 6px; font-family: var(--s-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
  .synergy-tab .sa-cmp__val--a { text-align: left; }
  .synergy-tab .sa-cmp__delta { text-align: left; }
  .synergy-tab .sa-cmp__reason { grid-column: 1 / -1; padding-left: 0; }
}