/* ============================================================
   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: CAPSULE COL PERIMETRO CHE SI COLORA ----------
   Vincenzo, 5 settembre: «devi mettere le capsule, però fatte in modo che il
   perimetro si faccia come l'applicazione che vogliamo copiare. Non è che c'è
   la progress bar sotto, non c'è la progress bar solo in basso, ma è tutto il
   perimetro la progress bar».

   Due miei errori in fila, e vale la pena scriverli perche' erano lo stesso
   errore: prima una capsula con la barretta SOTTO, poi un anello TONDO. La
   figura vera e' la terza — la capsula, col suo bordo che si colora tutto
   intorno partendo dall'alto. La forma e' della capsula, il comportamento e'
   dell'anello.

   🔴 Il trucco che lo rende indipendente dalla larghezza e' `pathLength="100"`
   sul `<rect>`: normalizza il perimetro a 100 unita' qualunque sia la
   dimensione resa, quindi `stroke-dashoffset` e' direttamente «quanto manca in
   percentuale» e non serve ricalcolare niente al ridimensionamento. Senza,
   ogni rotazione dello schermo vorrebbe un giro di JS. */
.benzina {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 14px;
}
.mf-caps {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 62px; padding: 8px 10px;
  min-width: 0;
}
/* Il bordo e' un SVG sotto, non un `border`: un bordo CSS non si puo' colorare
   a meta'. Il rettangolo ha il raggio della capsula e riempie la tessera. */
.mf-caps__giro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.mf-caps__pista { stroke: var(--mf-pastiglia, #E9E9E9); }
.mf-caps__arco {
  stroke: var(--tinta, var(--mf-calorie, #5B95FA));
  transition: stroke-dashoffset 0.8s var(--mf-ease, cubic-bezier(0.32, 0.72, 0.24, 1));
}
/* Sforato: il giro si chiude e la capsula prende dentro un velo della sua
   tinta, invece di far crescere un bordo che non ha piu' dove andare. */
.mf-caps.oltre { background: color-mix(in srgb, var(--tinta) 10%, transparent); border-radius: 999px; }
.mf-caps__v {
  position: relative;
  font-family: var(--mf-grot, var(--mf-font, inherit));
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--mf-testo, #000);
  line-height: 1.05; white-space: nowrap;
}
.mf-caps__v small { font-size: 12px; font-weight: 600; margin-left: 1px; }
.mf-caps__v[data-cifre="5"] { font-size: 17px; }
.mf-caps__v[data-cifre="6"] { font-size: 15px; letter-spacing: -0.03em; }
.mf-caps__et {
  position: relative;
  font-family: var(--mf-font, inherit); font-size: 12px; font-weight: 500;
  color: var(--mf-testo-3, #767676); line-height: 1.2; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---------- 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; }