/**
 * Adherence heatmap — griglia 53x7 degli ultimi 12 mesi nella tab Oggi.
 *
 * La griglia e' piu' larga di qualsiasi telefono: 53 colonne non si
 * comprimono senza rendere le celle indistinguibili. Scorre quindi dentro il
 * proprio contenitore (.hm-scroller), mai facendo scorrere la pagina.
 *
 * Le tinte vengono dalla scala primary (teal) dei design token: cinque passi
 * abbastanza distanti da restare distinguibili anche a 10px e a monitor
 * poco fedeli. La cella non porta testo, quindi il vincolo e' il contrasto
 * fra tinte adiacenti, non quello del testo.
 */

.adherence-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  /* Livello interno al componente, non un gradino della scala globale.
     `--z-sticky` (100 in style.css) e' per la chrome di pagina che deve
     stare sopra i dropdown; qui la colonna dei giorni deve solo stare sopra
     le celle della propria card, e prendere 100 la porterebbe davanti a
     menu e overlay che le scorrono sopra. Nominato invece che scritto
     inline perche' resti chiaro che l'1 e' una scelta, non una dimenticanza. */
  --hm-weekdays-layer: 1;
}

/* Il contenitore che scorre. La pagina non deve mai scorrere in orizzontale. */
.hm-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: var(--space-1);
  /* Su iOS senza questo lo scroll interno risulta legnoso. */
  -webkit-overflow-scrolling: touch;
}

/* Larghezza intrinseca: le colonne non si comprimono, si scorre. */
.hm-scroller > div {
  width: max-content;
}

.hm-months {
  display: flex;
  gap: 3px;
  /* Allineata alle colonne, dopo la colonna delle etichette dei giorni. */
  margin-left: calc(var(--space-8) + 3px);
  margin-bottom: var(--space-1);
}

.hm-month {
  width: 11px;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: visible;
}

.hm-body {
  display: flex;
  gap: 3px;
}

/* Le etichette dei giorni restano agganciate a sinistra mentre la griglia
   scorre: su mobile la griglia si apre sulla settimana in corso, cioe' gia'
   scrollata a destra, e senza sticky la colonna sarebbe fuori campo proprio
   nel momento in cui serve a leggere le righe. */
.hm-weekdays {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: var(--space-8);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: var(--hm-weekdays-layer);
  background: var(--color-surface);
}

.hm-weekday {
  height: 11px;
  font-size: 0.625rem;
  line-height: 11px;
  color: var(--color-gray-600);
  white-space: nowrap;
}

.hm-columns {
  display: flex;
  gap: 3px;
}

.hm-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Raggio fisso a 2px, non var(--radius-sm): su una cella da 11px i 4px del
   token la rendono un cerchio, e una griglia di pallini smette di leggersi
   come un calendario.
   box-sizing e bordo trasparente per default: il giorno vuoto accende il
   proprio bordo senza cambiare dimensione rispetto agli altri. */
.hm-cell {
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--color-gray-100);
  flex-shrink: 0;
}

/* Il giorno senza registrazioni e' l'unico contorno vuoto della griglia.
   La distinzione non e' affidata alla tinta: gray-200 e primary-200 hanno
   luminanza identica (rapporto misurato 1.00:1), quindi in scala di grigi,
   in acromatopsia o in forced-colors "non ho registrato niente" e "ho
   registrato qualcosa" sarebbero la stessa cella. Il bordo sopravvive a
   tutti e tre. */
.hm-cell.l0 {
  background: var(--color-gray-100);
  /* gray-500 e non un grigio piu' tenue: misurato 4.40:1 contro il proprio
     riempimento, sopra la soglia 3:1 di WCAG 1.4.11 per la grafica. Con
     gray-300 il rapporto era 1.37:1, cioe' un bordo che a vista non c'era. */
  border-color: var(--color-gray-500);
}
/* Le quattro classi piene salgono monotone in luminosita', cosi' l'ordine
   resta leggibile anche a chi non distingue il verde-azzurro. */
.hm-cell.l1 {
  background: var(--color-primary-300);
}
.hm-cell.l2 {
  background: var(--color-primary-500);
}
.hm-cell.l3 {
  background: var(--color-primary-700);
}
.hm-cell.l4 {
  background: var(--color-primary-900);
}

/* In forced-colors i background vengono sostituiti dal sistema: senza questo
   la griglia diventerebbe uniforme. Il bordo e' l'unico canale che resta. */
@media (forced-colors: active) {
  .hm-cell {
    border-color: CanvasText;
  }
  .hm-cell.l0 {
    background: Canvas;
  }
  .hm-cell.l1,
  .hm-cell.l2,
  .hm-cell.l3,
  .hm-cell.l4 {
    background: Highlight;
  }
}

/* Oggi si riconosce dal bordo, non da una tinta: la tinta dice quanto hai
   registrato e non puo' dire anche "sei qui". */
.hm-cell.today {
  box-shadow: 0 0 0 2px var(--color-gray-900);
}

/* I giorni non ancora arrivati restano vuoti: colorarli di grigio come i
   giorni saltati direbbe che li hai gia' mancati. */
.hm-cell.future {
  background: transparent;
}

.hm-summary {
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

.hm-legend {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hm-legend-label {
  font-size: 0.6875rem;
  color: var(--color-gray-600);
  margin: 0 var(--space-2);
}

@media (max-width: 640px) {
  .hm-cell,
  .hm-month {
    width: 10px;
  }

  .hm-cell,
  .hm-weekday {
    height: 10px;
  }

  .hm-weekday {
    line-height: 10px;
  }
}

/* Chi ha chiesto meno animazioni non e' interessato allo scroll morbido. */
@media (prefers-reduced-motion: reduce) {
  .hm-scroller {
    scroll-behavior: auto;
  }
}