/*
 * Daily check-up component.
 *
 * Kept separate from app.css because the card, bottom sheet and five tap scales form one bounded
 * component. No animation library is needed: transform, opacity and colour transitions are enough
 * for immediate feedback and keep the interaction light on mobile GPUs.
 */

.daily-checkin-card {
  overflow: visible;
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

/* La porta del check-up sulla home (26/09, mock 01): una pastiglia subito sotto la parola dello
   stato, accanto all'anello. E' la stessa pastiglia «Da fare» che la carta della home portava nella
   sua testata, ed e' un collegamento vero (a /check-up?compila=true, per chi non ha lo script):
   niente sottolineatura. Il foglio e' dentro, chiuso non si disegna.

   IL DISEGNO E' ALTO 32 PUNTI, IL BERSAGLIO 46: otto punti in piu' sopra e sotto il bordo interno
   (sette oltre il bordo) con uno pseudo-elemento trasparente, che prende il dito senza cambiare la pastiglia ne' spostare quello che
   le sta intorno (era 100 per 32, verifiche del 26/09). */
.checkin-door { margin-top: 6px; }
.checkin-door > .checkin-state { position: relative; text-decoration: none; }
.checkin-door > .checkin-state::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 0;
  bottom: -8px;
  left: 0;
}

.checkin-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}

.checkin-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mut2);
}

.checkin-state.is-done {
  border-color: color-mix(in srgb, var(--ok) 38%, transparent);
  color: var(--ok);
}

.checkin-state.is-done .checkin-state-dot {
  background: var(--ok);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent);
}

/* La carta di oggi sulla pagina del check-up (taglio 7, mock 02): «Oggi» e lo stato sulla stessa riga,
   poi cinque cerchi da 44 - il valore di oggi, o tratteggiati e vuoti finche' non c'e' - con il nome
   corto sotto. «Oggi» e' un titolo di sezione scritto come un'etichetta corta: il maiuscolo va bene
   (regola 7 del mock). */
.checkin-today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkin-today-title {
  margin: 0;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mut);
}

.checkin-snapshot {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.checkin-snapshot-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.checkin-slot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  color: var(--mut2);
  font-variant-numeric: tabular-nums;
}

.checkin-snapshot-item.is-done .checkin-slot {
  border: 1.5px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.checkin-slot strong { font-size: 18px; font-weight: 700; line-height: 1; }
.checkin-slot small { font-size: 10px; color: var(--mut); }

/* Il nome sotto il cerchio, intero. «STANCHEZZA» e' larga 66 punti e la colonna 55 a 360 (misurato il
   27/09): tagliata diceva «STANCHE…». Esce di qualche punto dalla sua colonna, centrata, e c'e' posto:
   i vicini sono «SONNO» e «DOMS», corti. */
.checkin-slot-name {
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .3px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mut2);
}

.checkin-area-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: -2px 0 12px;
  font-size: 12px;
}

.checkin-area-summary-label {
  font-family: var(--cond);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--mut2);
}

.checkin-area-summary-values { color: var(--ink); }

.checkin-caution {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.checkin-open {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
}

/* Native dialog supplies focus trapping and Escape handling. Visually it behaves like a mobile
   bottom sheet, keeping the repeated controls close to the thumb. */
.checkin-dialog {
  width: min(100%, 720px);
  max-width: none;
  max-height: min(92dvh, 860px);
  margin: auto auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 -24px 64px rgba(0, 0, 0, .42);
}

.checkin-dialog[open] {
  animation: checkin-sheet-in 180ms cubic-bezier(.2, .8, .2, 1);
}

/* Senza script il foglio aperto dal server (un invio rifiutato, ?aggiungi, ?evento, e dal 26/09 il
   check-up con ?compila, dove arrivano le porte della home, le abitudini con ?abitudini, «Nuova
   seduta» con ?nuova e il foglio della scheda con ?modifica) e' un pannello nel flusso, sotto al comando che l'ha aperto. La X-bottone,
   che senza script non chiude, non si mostra; la X-collegamento si' - riporta alla pagina senza il
   parametro che l'ha aperto, cioe' chiude davvero (le abitudini, «Nuova seduta»).
   Con lo script un foglio aperto dal server non si disegna finche' app.js non lo riapre modale:
   niente sfarfallio di un foglio in mezzo alla pagina per un istante. Nessun foglio si apre di
   proposito non modale - show() in app.js non si usa - quindi la seconda regola non spegne niente
   di voluto. Nati con «Fissa una gara o un evento» (25/09). */
@media (scripting: none) {
  .checkin-dialog[open] { position: static; max-height: none; margin: 0 0 18px; border-radius: 24px; box-shadow: none; animation: none; }
  .checkin-dialog[open] button[data-sheet-close],
  .checkin-dialog[open] [data-checkin-close] { display: none; }
  /* E si allunga quanto il suo contenuto: la scatola che scorre dentro al foglio serve al foglio
     modale, e in un pannello nel flusso sarebbe una pagina dentro alla pagina. */
  .checkin-dialog[open] .checkin-form { max-height: none; }
}
@media (scripting: enabled) {
  .checkin-dialog[open]:not(:modal) { display: none; }
}

.checkin-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

.checkin-form {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 860px);
}

.checkin-dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 11px;
  border-bottom: 1px solid var(--line);
}

.checkin-dialog-head h2 {
  margin: 3px 0 0;
  font-size: clamp(23px, 6vw, 30px);
  line-height: 1.08;
}

/* L'occhiello sopra il titolo di un foglio - «Passo 1 di 3», «Gare», «Record personali»: una regola
   per tutti i fogli, nel carattere condensato e maiuscolo delle etichette. C'era in piu' fogli e
   non aveva una regola, quindi era un paragrafo qualunque sopra al titolo. */
.checkin-dialog-head .eyebrow { margin: 0 0 4px; font-family: var(--cond); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); }

.checkin-close {
  /* No negative margin: the invisible 44px tap target and focus outline stay inside the header. */
  flex: 0 0 44px;
  margin: 0;
}

.checkin-progress {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}

.checkin-progress-bars {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.checkin-progress-bars span {
  height: 3px;
  border-radius: 4px;
  background: var(--line);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.checkin-progress-bars span.is-complete {
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent-soft);
}

.checkin-progress-count {
  min-width: 30px;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 1px;
  text-align: right;
  color: var(--mut);
}

.checkin-error { margin: 12px 20px 0; }

.checkin-metrics {
  min-height: 0;
  padding: 4px 20px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.checkin-metric {
  min-width: 0;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.checkin-metric:last-child { border-bottom: 0; }

.checkin-metric legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.checkin-metric legend small {
  color: var(--mut2);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.checkin-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 7px;
}

/* Le scelte e le zone sono <label>: la regola globale dei campi (16 punti sopra, 8 sotto) le staccava
   dalla domanda - circa 45 punti vuoti per voce (DA-FARE §23; il mock 02b lo dice e lo toglie, 26/09). */
.checkin-choice,
.checkin-area-chip { margin: 0; }

.checkin-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.checkin-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.checkin-choice-face {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--mut);
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  transition: transform 120ms ease, color 140ms ease, border-color 140ms ease,
              background-color 140ms ease, box-shadow 140ms ease;
}

.checkin-choice:active .checkin-choice-face { transform: scale(.92); }
.checkin-choice input:focus-visible + .checkin-choice-face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Low→high colours follow meaning, not the number: sleep/motivation improve to the right;
   fatigue/DOMS/stress become more adverse. */
.checkin-scale[data-direction="positive"] .checkin-choice:nth-child(1) { --checkin-level: var(--danger); }
.checkin-scale[data-direction="positive"] .checkin-choice:nth-child(2) { --checkin-level: var(--warn); }
.checkin-scale[data-direction="positive"] .checkin-choice:nth-child(3) { --checkin-level: var(--accent); }
.checkin-scale[data-direction="positive"] .checkin-choice:nth-child(4) { --checkin-level: var(--ok); }
.checkin-scale[data-direction="positive"] .checkin-choice:nth-child(5) { --checkin-level: var(--ok); }
.checkin-scale[data-direction="negative"] .checkin-choice:nth-child(1) { --checkin-level: var(--ok); }
.checkin-scale[data-direction="negative"] .checkin-choice:nth-child(2) { --checkin-level: var(--ok); }
.checkin-scale[data-direction="negative"] .checkin-choice:nth-child(3) { --checkin-level: var(--accent); }
.checkin-scale[data-direction="negative"] .checkin-choice:nth-child(4) { --checkin-level: var(--warn); }
.checkin-scale[data-direction="negative"] .checkin-choice:nth-child(5) { --checkin-level: var(--danger); }

.checkin-choice input:checked + .checkin-choice-face {
  border-color: var(--checkin-level);
  color: var(--checkin-level);
  background: color-mix(in srgb, var(--checkin-level) 14%, var(--surface-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--checkin-level) 18%, transparent);
  animation: checkin-choice-pop 150ms ease-out;
}

/* Il livello di mezzo e' l'accento: con volt nel chiaro «3» scritto in #d7ff2e sul bianco non si leggeva
   (critica della pagina, E8). Il numero prende l'accento da leggere; il bordo e il fondo restano. */
.checkin-scale .checkin-choice:nth-child(3) input:checked + .checkin-choice-face { color: var(--accent-text); }

.checkin-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: var(--mut2);
}

.checkin-doms-areas {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.checkin-doms-areas p {
  margin: 0 0 9px;
  color: var(--mut);
  font-size: 12px;
}

.checkin-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.checkin-area-chip { position: relative; cursor: pointer; }
.checkin-area-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkin-area-chip span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--mut);
  font-size: 12px;
  transition: transform 120ms ease, color 140ms ease, border-color 140ms ease,
              background-color 140ms ease;
}

.checkin-area-chip:active span { transform: scale(.94); }
.checkin-area-chip input:checked + span {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.checkin-area-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checkin-boundary {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 20px 0;
  border-top: 1px solid var(--line);
  color: var(--mut2);
  font-size: 12px;
  line-height: 1.4;
}

.checkin-save-row {
  flex: 0 0 auto;
  padding: 11px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--panel);
}

.checkin-submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  margin: 0;
  overflow: hidden;
}

.checkin-submit:disabled {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--mut2);
  cursor: not-allowed;
  opacity: .72;
}

.checkin-save-mark {
  display: inline-grid;
  place-items: center;
  width: 0;
  opacity: 0;
  transform: scale(.4);
  transition: width 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.checkin-submit.is-saving .checkin-save-mark {
  width: 18px;
  margin-left: 7px;
  opacity: 1;
  transform: scale(1);
}

@keyframes checkin-sheet-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes checkin-choice-pop {
  0% { transform: scale(.9); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (max-width: 520px) {
  .checkin-dialog { width: 100%; }
  .checkin-dialog-head, .checkin-progress { padding-left: 16px; padding-right: 16px; }
  .checkin-metrics { padding-left: 16px; padding-right: 16px; }
  .checkin-boundary, .checkin-save-row { padding-left: 16px; padding-right: 16px; }
  .checkin-metric legend { display: block; }
  .checkin-metric legend small { display: block; margin-top: 3px; text-align: left; }
  .checkin-scale { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkin-dialog[open],
  .checkin-choice input:checked + .checkin-choice-face {
    animation: none;
  }
  .checkin-close,
  .checkin-progress-bars span,
  .checkin-choice-face,
  .checkin-area-chip span,
  .checkin-save-mark {
    transition: none;
  }
}

/* Read-only Check-up history. Five small multiples keep opposite metric directions honest. Dal taglio 7
   (mock 02) la sezione sta fuori dalle carte, con il suo titolo, e i cinque segnali sono righe di una carta
   sola. */
.checkin-history { margin-top: 8px; }

.checkin-range {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

/* 44, la misura di un dito (taglio 7: era 38, sotto la regola dei comandi piccoli). */
.checkin-range a {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--mut);
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .8px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease,
              background-color 140ms ease, box-shadow 140ms ease;
}

.checkin-range a:hover { color: var(--ink); }

.checkin-range a.is-active {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent);
}

.checkin-range a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.checkin-history-empty {
  margin-top: 14px;
  text-align: center;
  color: var(--mut);
}

.checkin-history-empty p { margin: 0; }

.checkin-trend-card { margin-top: 14px; }

.checkin-trend {
  --trend-color: var(--accent-text);
  padding: 16px 0 14px;
}

/* Il filo fra una riga e l'altra: righe di una carta, non tessere dentro alla tessera. */
.checkin-trend + .checkin-trend { border-top: 1px solid var(--line-soft); }
.checkin-trend:first-child { padding-top: 0; }
.checkin-trend:last-child { padding-bottom: 0; }

.checkin-trend--sleep,
.checkin-trend--motivation { --trend-color: var(--ok); }

.checkin-trend--fatigue,
.checkin-trend--stress { --trend-color: var(--warn); }

.checkin-trend--soreness { --trend-color: var(--danger); }

.checkin-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.checkin-trend-name { display: grid; min-width: 0; gap: 2px; }

.checkin-trend-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.checkin-trend-name span {
  color: var(--mut2);
  font-size: 12px;
}

/* L'ultimo valore, grande a destra, con il suo giorno sotto: il numero del mock, nell'inchiostro. Il colore
   del segnale lo porta la curva sotto, e un numero colorato accanto a lei direbbe la stessa cosa due volte. */
.checkin-trend-latest {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 2px;
  margin: 0;
  color: var(--mut2);
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.checkin-trend-latest strong {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.checkin-trend-latest small { font-size: 12px; font-weight: 500; color: var(--mut); }

.checkin-chart-wrap { min-width: 0; }

.checkin-chart {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: visible;
}

.checkin-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.checkin-chart-axis {
  fill: var(--mut2);
  font-family: var(--cond);
  font-size: 9px;
}

.checkin-chart-line {
  fill: none;
  stroke: var(--trend-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--trend-color) 48%, transparent));
  vector-effect: non-scaling-stroke;
}

.checkin-chart-point {
  color: var(--trend-color);
  cursor: pointer;
  outline: none;
}

.checkin-chart-point-hit {
  fill: transparent;
  pointer-events: all;
}

.checkin-chart-point-core {
  fill: var(--panel);
  stroke: currentColor;
  stroke-width: 2;
  transition: r 120ms ease, fill 120ms ease, stroke-width 120ms ease;
  vector-effect: non-scaling-stroke;
}

.checkin-chart-point:hover .checkin-chart-point-core,
.checkin-chart-point:focus .checkin-chart-point-core,
.checkin-chart-point.is-selected .checkin-chart-point-core {
  r: 4.5px;
  fill: currentColor;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.checkin-trend-dates {
  display: flex;
  justify-content: space-between;
  margin: -2px 1px 0 20px;
  color: var(--mut2);
  font-family: var(--cond);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.checkin-trend-tooltip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 0 auto;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--trend-color) 44%, var(--line));
  border-radius: 9px;
  color: var(--mut);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  font-size: 12px;
}

.checkin-trend-tooltip strong { color: var(--trend-color); }

.checkin-trend-tooltip [data-checkin-trend-output-detail] {
  flex-basis: 100%;
  color: var(--ink);
}

@media (max-width: 620px) {
  .checkin-range {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .checkin-range a {
    min-width: 0;
    padding-inline: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkin-range a,
  .checkin-chart-point-core {
    transition: none;
  }
}