/* ============================================================
   I COMPONENTI DEL RIFERIMENTO, condivisi fra l'app e la pagina del kit.

   Sono le tre figure che reggono TUTTA la nutrizione di MacroFactor, e che qui
   reggono anche l'allenamento: la stessa grammatica sui due lati, perche' un
   corpo solo non ha due estetiche.

     .mf-conteggio   la pastiglia in alto col contatore: «1.230 / 2.010»
     .mf-griglia     la griglia settimanale: sette colonne, N righe, oggi cerchiato
     .mf-misura      la riga di misura: nome · «x / y g» · «%» · barra con la tacca

   🔴 Ogni numero viene da RIFERIMENTO-MACROFACTOR.md. Il foglio si appoggia ai
   token `--mf-*`, che app.css dichiara come alias dei suoi: cosi' questi
   componenti vivono in un posto solo e non esistono due copie che divergono.
   ============================================================ */

/* ---------- Il contatore in alto ----------
   Nel riferimento e' una capsula CONTORNATA in mezzo alle altre, che sono piene:
   e' l'unico elemento della barra che porta un bordo, ed e' cosi' che si fa
   notare senza essere nera. Sopra ha una tacca del colore della misura. */
.mf-conteggio {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--mf-pastiglia, #E9E9E9);
  font-family: var(--mf-font, inherit);
  font-size: 16px; font-weight: 500; color: var(--mf-testo, #000);
  font-variant-numeric: tabular-nums;
}
.mf-conteggio__tacca {
  position: absolute; top: -1px; height: 4px; border-radius: 2px;
  background: var(--mf-calorie, #5B95FA);
  transition: left 0.5s var(--mf-ease, ease), width 0.5s var(--mf-ease, ease);
}
.mf-conteggio__sep { color: var(--mf-testo-3, #767676); margin: 0 4px; }

/* ---------- LA BENZINA ----------
   Vincenzo, 3 settembre: «il fatto della benzina è inserito solamente in piatto,
   ma fino a un certo momento, perché comunque deve essere gamification fino
   all'ultimo». Quindi il contatore esce dalla vista Piatto e sale in testata,
   dove sta su TUTTE e cinque le viste e non se ne va mai.
   Tre capsule invece di una, perche' su 393 px una sola capsula da 48 px di
   altezza mangia la testata e dice un terzo delle cose. La forma resta quella
   misurata — capsula contornata, tacca colorata sopra — solo piu' bassa: e' la
   stessa figura in scala, non una figura nuova. */
.benzina {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 12px;
}
.mf-conteggio--mini {
  height: 40px; padding: 0 6px;
  flex-direction: column; gap: 0;
  font-size: 14px; font-weight: 600;
  overflow: hidden;
}
.mf-conteggio--mini .mf-conteggio__et {
  font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--mf-testo-3, #767676);
  text-transform: none; letter-spacing: 0;
}
.mf-conteggio--mini .mf-conteggio__v {
  line-height: 1.15; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mf-conteggio--mini .mf-conteggio__sep { margin: 0 2px; }
/* La tacca della mini corre lungo il bordo BASSO e cresce da sinistra: a 40 px
   di altezza il trattino centrato del riferimento diventa illeggibile, mentre il
   filo che avanza si legge con la coda dell'occhio. E' la stessa informazione,
   portata alla scala in cui vive.
   In basso e non in alto perche' e' li' che la capsula la ritaglia: `overflow:
   hidden` piu' il raggio la fanno finire dentro la curva, invece di scavallarla
   e sembrare un trattino appoggiato sopra la pastiglia. */
.mf-conteggio--mini .mf-conteggio__tacca {
  left: 0; top: auto; bottom: 0; height: 3px; border-radius: 0;
  /* Il filo cresce da sinistra a ogni ridisegno: e' l'unica animazione della
     testata, e serve a far VEDERE che il conto e' avanzato quando si spunta un
     pasto. Solo `transform`, quindi non costa un ricalcolo di layout. */
  transform-origin: left center;
  animation: benzinaTacca 0.55s var(--mf-ease, cubic-bezier(0.32, 0.72, 0.24, 1)) both;
}
@keyframes benzinaTacca { from { transform: scaleX(0); } to { transform: none; } }
/* Sforato: la capsula si accende della sua tinta invece di crescere oltre il
   bordo. Sopra il bersaglio il filo pieno non ha piu' niente da dire. */
.mf-conteggio--mini.oltre { box-shadow: inset 0 0 0 1.5px var(--tinta, #FF8760); }
.mf-conteggio--mini.oltre .mf-conteggio__tacca { width: 100% !important; }

/* ---------- La griglia settimanale ----------
   Sette colonne, una per giorno, e una riga per misura. Le barre crescono dal
   basso; la colonna di oggi e' cerchiata da un rettangolo nero arrotondato, che
   e' il solo modo in cui il riferimento dice «sei qui».
   Misure: colonna 20 pt di passo, riga 53 pt, barra alta 27 pt. */
.mf-griglia {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 14px;
  align-items: stretch;
}
.mf-griglia__barre {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.mf-griglia__col { display: grid; grid-template-rows: repeat(var(--righe, 4), 53px); }
.mf-griglia__cella {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 9px 0;
}
.mf-griglia__barra {
  position: relative;
  width: 14px; height: 34px;
  background: var(--mf-traccia-macro, #EFEFEF);
  border-radius: 3px;
  overflow: hidden;
}
.mf-griglia__pieno {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--tinta, var(--mf-calorie, #5B95FA));
  transition: height 0.6s var(--mf-ease, ease);
}
/* Il cappello grigio in cima alla barra vuota: nel riferimento c'e' anche quando
   il dato e' zero, ed e' quello che fa leggere la colonna come una misura
   ancora da riempire invece che come uno spazio vuoto. */
.mf-griglia__barra::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--mf-riempimento, #E8E8E8);
}
/* Oggi. Il riquadro sta SOPRA le barre e non le tocca: e' un contorno, non un
   fondo, perche' un fondo cambierebbe il colore della misura che contiene. */
.mf-griglia__oggi {
  position: absolute; top: -6px; bottom: -6px;
  border: 2px solid var(--mf-testo, #000);
  border-radius: 12px;
  pointer-events: none;
  transition: left 0.4s var(--mf-ease, ease);
}
.mf-griglia__giorni {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: var(--mf-font, inherit);
  font-size: 14px; color: var(--mf-testo-3, #767676);
  text-align: center; padding-top: 10px;
}
.mf-griglia__giorni b { color: var(--mf-testo, #000); font-weight: 500; }
/* Le letture a destra: numero grande, unita' piccola accanto, bersaglio sotto. */
.mf-griglia__letture { display: grid; grid-template-rows: repeat(var(--righe, 4), 53px); }
.mf-griglia__lettura {
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--mf-font, inherit); white-space: nowrap;
}
.mf-griglia__lettura .v {
  font-size: 22px; font-weight: 800; color: var(--mf-testo, #000);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mf-griglia__lettura .v i { font-style: normal; font-weight: 500; font-size: 16px; margin-left: 2px; }
.mf-griglia__lettura .t { font-size: 14px; color: var(--mf-testo-3, #767676); line-height: 1.2; }

/* ---------- La riga di misura, con la tacca del bersaglio ----------
   E' la figura di «Carb Breakdown»: nome a sinistra, «fatto / bersaglio» al
   centro, percentuale a destra, e sotto una barra sottile con una tacca grigia
   dove cade il bersaglio. La tacca e' il segno che distingue questa barra da una
   qualunque barra di progresso: dice dove si DEVE arrivare, non solo dove si e'. */
.mf-misura + .mf-misura { margin-top: 18px; }
.mf-misura__testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--mf-font, inherit);
}
/* Il nome puo' essere lungo («Squat al multipower o hack squat») e allora va a
   capo; i due numeri no, mai: se vanno a capo la riga smette di leggersi come
   una misura e diventa tre frammenti. `min-width: 0` sul nome e `nowrap` sui
   numeri sono le due righe che lo impediscono. */
.mf-misura__nome {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 500; color: var(--mf-testo, #000); line-height: 1.25;
}
.mf-misura__conto, .mf-misura__quota {
  flex-shrink: 0; white-space: nowrap;
  font-size: 16px; color: var(--mf-testo-2, #666); font-variant-numeric: tabular-nums;
}
.mf-misura__quota { min-width: 46px; text-align: right; }
.mf-misura__barra {
  position: relative; height: 10px; margin-top: 10px;
  background: var(--mf-traccia, #F6F6F6);
  border-radius: 2px; overflow: hidden;
}
.mf-misura__pieno {
  position: absolute; inset: 0 auto 0 0;
  background: var(--tinta, var(--mf-calorie, #5B95FA));
  transition: width 0.6s var(--mf-ease, ease);
}
/* La zona del bersaglio: la fascia tenue che nel riferimento sta sotto la fibra,
   e dice «da qui in poi va bene». Compare solo dove il bersaglio e' una FASCIA. */
.mf-misura__zona {
  position: absolute; top: 0; bottom: 0;
  background: var(--tinta-tenue, var(--mf-calorie-tenue, #AAC7FF));
}
.mf-misura__tacca {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--mf-testo-4, #A8A8A8);
}
.mf-misura--senza-bersaglio .mf-misura__quota { color: var(--mf-testo-3, #767676); }

/* ---------- L'impalcatura dei due pannelli ---------- */
.pannello-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
.pannello-nota {
  margin-top: 18px; font-family: var(--mf-font, inherit);
  font-size: 14px; line-height: 1.5; color: var(--mf-testo-3, #767676);
}

/* Il segmento «Consumed / Remaining» del riferimento: capsula grigia, la voce
   scelta NERA col bianco sopra. Nessun colore: e' uno stato, non un dato. */
.pannello-seg {
  display: inline-flex; margin-top: 18px; padding: 4px;
  background: var(--mf-pastiglia, #E9E9E9); border-radius: 999px;
}
.mf-seg {
  appearance: none; border: 0; background: transparent;
  min-height: 36px; padding: 0 18px; border-radius: 999px;
  font-family: var(--mf-font, inherit); font-size: 14px; font-weight: 500;
  color: var(--mf-testo, #000); cursor: pointer;
}
.mf-seg.sel { background: var(--mf-testo, #000); color: var(--mf-tessera, #fff); font-weight: 600; }
/* Il segmento del riferimento e' alto 36-40 pt, sotto i 44 di Apple: loro sono
   nativi e l'area sensibile ce l'hanno comunque. Qui l'area si allarga con uno
   pseudo-elemento, come gia' fa il resto dell'app: la FORMA resta quella
   misurata, il BERSAGLIO diventa quello che il dito richiede. */
.mf-seg { position: relative; }
.mf-seg::after { content: ''; position: absolute; inset: -6px; }