/* ============================================================
   dayotto — componenti dei flussi
   Tasti a livelli, legenda, pulsanti in fondo, i tre indicatori:
   per CLAUDE.md vale la versione della daily.
   ============================================================ */

/* ---------- colonne e griglie: le liste stanno su una colonna sola (brand manual) ---------- */
.col { display: flex; flex-direction: column; gap: 7px; }
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
@media (max-width: 420px) { .griglia { grid-template-columns: 1fr; } }

/* ---------- titoletto di gruppo (daily .gtit) ---------- */
.gtit { display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; }
.gtit:first-child { margin-top: 2px; }
.gtit .gn { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); }
.gtit .gl { flex: 1; height: 1.5px; background: var(--line); border-radius: 99px; }
.nome-schema { font-family: var(--brand); font-weight: 800; font-size: 21px; line-height: 1.2; margin: 5px 0 12px; }
.piatto.qui { background: var(--iris-soft); border-color: var(--iris); }
.piatto.qui .dn, .piatto.qui .dp { color: var(--iris-ink); }
.titoletto { font-weight: 700; font-size: 16px; margin: 0; }
.domanda { font-family: var(--brand); font-weight: 700; font-size: 15px; margin: 4px 0 8px; }

/* ---------- il tasto (daily .tog): scelta semplice o a livelli ---------- */
.tog {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 9px 12px;
  text-align: left; cursor: pointer; color: var(--ink);
  border-radius: 13px; border: 1.5px solid var(--line); background: var(--card);
  transition: background .12s, border-color .12s;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.tog .em { font-size: 20px; flex: 0 0 auto; width: 24px; text-align: center; line-height: 1; }
.tog .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tog .tt { font-weight: 700; font-size: 15px; line-height: 1.3; }
.tog .ts { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.35; }
.tog .th { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; border: 1.5px solid var(--line); }
/* dentro il protocollo · al limite · fuori: colori d'identità, mai semantici */
.tog[data-s="dentro"] { background: var(--verde-soft); border-color: var(--verde); }
.tog[data-s="dentro"] .tt, .tog[data-s="dentro"] .ts { color: var(--verde-ink); }
.tog[data-s="limite"] { background: var(--citron-soft); border-color: var(--citron); }
.tog[data-s="limite"] .tt, .tog[data-s="limite"] .ts { color: var(--citron-ink); }
.tog[data-s="fuori"] { background: var(--coral-soft); border-color: var(--coral); }
.tog[data-s="fuori"] .tt, .tog[data-s="fuori"] .ts { color: var(--coral-ink); }

/* i pallini dicono quanto */
.pips { display: flex; gap: 3px; flex: 0 0 auto; }
.pips i { width: 8px; height: 8px; border-radius: 99px; background: #DFE4EE; display: block; border: 1px solid #CFD6E4; }
.tog[data-s="dentro"] .pips i.f { background: var(--verde); border-color: var(--verde); }
.tog[data-s="limite"] .pips i.f { background: var(--citron); border-color: var(--citron); }
.tog[data-s="fuori"] .pips i.f { background: var(--coral); border-color: var(--coral); }

/* sotto-scelte: le fonti delle proteine, il tipo di un sintomo */
.sub { padding: 9px 11px; background: var(--paper); border-radius: 12px; border: 1.5px solid var(--line); }
.sub .st { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.sub .tog { min-height: 46px; }

/* ---------- istruzioni e legenda (daily) ---------- */
.hint { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.legenda {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin: 0 0 12px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
}
.legenda span { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.legenda i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid; display: block; }
.legenda .dentro { border-color: var(--verde); background: var(--verde-soft); }
.legenda .limite { border-color: var(--citron); background: var(--citron-soft); }
.legenda .fuori  { border-color: var(--coral); background: var(--coral-soft); }
.legenda .libero { border-color: var(--faint); background: var(--card); }

/* a che passo sei */
.puntini { display: flex; gap: 5px; margin: 16px 0 2px; }
.puntini i { height: 5px; flex: 1; border-radius: 99px; background: var(--line); }
.puntini i.on { background: var(--iris); }

/* ---------- azioni in fondo (daily .actions) ---------- */
.azioni { margin: 24px 0 10px; }
.cta {
  width: 100%; min-height: 56px; cursor: pointer;
  border: var(--bd); border-radius: 16px; background: var(--iris); color: #fff;
  font-size: 17px; font-weight: 700; box-shadow: var(--pop);
}
.cta:active { transform: translate(2px, 2px); box-shadow: none; }
.cta[disabled] { opacity: .35; box-shadow: none; cursor: not-allowed; transform: none; }
.riga2 { display: flex; gap: 8px; margin-top: 9px; }
.sbtn {
  flex: 1; min-height: 48px; cursor: pointer; padding: 8px 10px;
  border-radius: 13px; border: 1.5px solid var(--line); background: var(--card);
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}

/* ---------- i tre indicatori: l'unico posto dei colori semantici, usati da semaforo ---------- */
.indicatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.sc { background: var(--card); border: var(--bd); border-radius: 15px; padding: 11px 10px 12px; box-shadow: var(--pop-sm); min-width: 0; }
.sc .t { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sc .riga { display: flex; align-items: baseline; gap: 5px; margin: 5px 0 8px; }
.sc .v { font-family: var(--brand); font-size: 30px; font-weight: 800; line-height: .9; }
.sc .tr { font-family: var(--mono); font-size: 11px; font-weight: 700; margin-left: auto; white-space: nowrap; }
.sc .bar { height: 6px; border-radius: 99px; background: #EDF0F6; overflow: hidden; }
.sc .bar i { display: block; height: 100%; border-radius: 99px; }
.sc.parziale { border-style: dashed; }
[data-e="bene"] .v, [data-e="bene"] .tr, [data-e="bene"] .tinta { color: var(--s-bene); }
[data-e="medio"] .v, [data-e="medio"] .tr, [data-e="medio"] .tinta { color: var(--s-medio); }
[data-e="male"] .v, [data-e="male"] .tr, [data-e="male"] .tinta { color: var(--s-male); }
[data-e="bene"] .bar i, .barra-dato[data-e="bene"] { background: var(--s-bene); }
[data-e="medio"] .bar i, .barra-dato[data-e="medio"] { background: var(--s-medio); }
[data-e="male"] .bar i, .barra-dato[data-e="male"] { background: var(--s-male); }

/* ---------- riquadri di regola, occasione, spiegazione (daily .reg .occ .ins) ---------- */
.reg { background: var(--citron-soft); border: 1.5px solid var(--citron); border-radius: 13px; padding: 10px 12px; margin-top: 9px; }
.occ { background: var(--iris-soft); border: 1.5px solid var(--iris); border-radius: 13px; padding: 10px 12px; margin-top: 9px; }
.reg .rt, .occ .rt { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px; }
.reg .rt, .reg .rd { color: var(--citron-ink); }
.occ .rt, .occ .rd { color: var(--iris-ink); }
.reg .rd, .occ .rd { font-size: 14px; line-height: 1.45; }
.ins { background: var(--iris-soft); border: 1.5px solid var(--iris); border-radius: 13px; padding: 11px 13px; font-size: 14px; line-height: 1.5; margin: 10px 0; color: var(--iris-ink); }

/* ---------- campi di testo ---------- */
.campo {
  width: 100%; min-height: 52px; padding: 12px 13px;
  border: 1.5px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 16px;
}
textarea.campo { min-height: 90px; resize: vertical; }
.campo:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-soft); }

/* ============================================================
   il piano del giorno (daily)
   ============================================================ */
.pasto { padding: 15px 0; border-top: 1.5px dashed var(--line); }
.pasto:first-child { border-top: none; padding-top: 2px; }
.pasto .mh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.pasto .mh .em { font-size: 18px; }
.pasto .mt { font-family: var(--brand); font-weight: 800; font-size: 18px; }
.pasto .dove {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--iris-ink);
  background: var(--iris-soft); border: 1.5px solid var(--iris); padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.pasto .ora { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: auto; }
.piatto { border: 1.5px solid var(--line); border-radius: 13px; padding: 10px 12px; margin: 7px 0; background: var(--paper); }
.piatto .dn { font-size: 15px; font-weight: 700; line-height: 1.35; }
.piatto .dp { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.piatto .dv { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.altro { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.5; }
.conf {
  display: flex; gap: 8px; align-items: center; margin: 12px 0;
  background: var(--iris-soft); border: 1.5px solid var(--iris); border-radius: 13px; padding: 10px 13px;
  font-size: 14px; font-weight: 700; color: var(--iris-ink);
}
.notif { border: var(--bd); border-radius: 15px; padding: 12px 14px; margin: 12px 0; background: var(--card); box-shadow: var(--pop-sm); }
.notif .nt { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.notif .nh { font-weight: 700; font-size: 15px; margin-top: 6px; line-height: 1.4; }
.notif .nb { font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* le scatoline delle abitudini, dentro il piano e nell'anteprima */
.scatole { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.scatola {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 9px 13px;
  text-align: left; font-size: 15px; font-weight: 700; border-radius: 13px; border: 1.5px solid;
}
.scatola .em { font-size: 18px; width: 22px; text-align: center; }
.scatola.tenere { border-color: var(--iris); background: var(--iris-soft); color: var(--iris-ink); cursor: pointer; }
.scatola.tenere[aria-pressed="true"] { background: var(--iris); color: #fff; border-color: var(--obsidian); box-shadow: var(--pop-sm); }
.scatola.intercettare { border-color: var(--coral); background: var(--coral-soft); color: var(--coral-ink); }

/* ============================================================
   andamento (daily)
   ============================================================ */
.testa-serie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.testa-serie .media { display: flex; align-items: baseline; gap: 8px; }
.testa-serie .etm { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.testa-serie .num { font-family: var(--brand); font-weight: 800; font-size: 24px; }
.testa-serie .dl { font-family: var(--mono); font-size: 11.5px; font-weight: 700; }
.serie { position: relative; height: 100px; margin: 14px 0 0; }
.serie .barre { display: flex; gap: 5px; align-items: flex-end; height: 100%; }
.serie .b { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: pointer; background: none; border: none; padding: 0; }
.serie .b i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; min-height: 4px; border: 1.5px solid var(--obsidian); }
.serie .b i.vuota { border-style: dashed; border-color: var(--line); background: transparent; }
.serie .media-riga { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--muted); pointer-events: none; }
.serie .media-riga b { position: absolute; right: 0; top: -15px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--muted); background: var(--card); padding: 0 4px; }
.giorni-serie { display: flex; gap: 5px; margin-top: 7px; }
.giorni-serie span { flex: 1; text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ============================================================
   abitudini
   ============================================================ */
.vuoto { text-align: center; padding: 28px 18px; }
.vuoto .grande { font-size: 40px; margin-bottom: 8px; }
.vuoto .tit { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.fila { display: flex; gap: 4px; margin-top: 7px; align-items: center; }
.fila i { width: 14px; height: 14px; border-radius: 4px; background: var(--line); display: block; }
.fila i.on { background: var(--iris); }
.fila .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 7px;
  background: var(--citron-soft); color: var(--citron-ink);
}
.foto { width: 100%; border-radius: 16px; border: 1.5px solid var(--line); display: block; margin: 12px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.chips span { font-size: 13.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; }
.chips .fuori { background: var(--coral-soft); color: var(--coral-ink); }
.chips .limite { background: var(--citron-soft); color: var(--citron-ink); }
.chips .dentro { background: var(--verde-soft); color: var(--verde-ink); }

/* ============================================================
   onboarding (intro)
   ============================================================ */
.intro-attiva .barra { display: none; }
.intro-attiva { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.eroe { margin: 22px 0 8px; }
.eroe .eb { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--iris); }
.eroe h1 { font-size: 34px; line-height: 1.08; margin: 8px 0 12px; }
.eroe p { color: var(--muted); font-size: 16px; margin: 0 0 12px; }
.eroe .payoff { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }

.righe .riga-intro { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1.5px dashed var(--line); }
.righe .riga-intro:first-of-type { border-top: none; padding-top: 4px; }
.riga-intro .re { font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto; }
.riga-intro .rt { font-weight: 700; font-size: 15px; }

/* il contatore di età, altezza e peso */
.misura { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-top: 1.5px dashed var(--line); }
.misura:first-of-type { border-top: none; }
.misura .ml { flex: 1 0 100%; font-weight: 700; font-size: 15px; }
.misura .mv { font-family: var(--mono); font-weight: 700; font-size: 16px; min-width: 76px; text-align: center; }
.misura button {
  min-width: 44px; min-height: 44px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); font-weight: 700; font-size: 15px; color: var(--ink);
}
.misura button.grande { font-size: 20px; }

/* una proposta di protocollo: si tocca per sceglierla */
.proposta {
  display: block; width: 100%; text-align: left; cursor: pointer; margin: 12px 0; padding: 14px 15px;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r);
}
.proposta[aria-pressed="true"] { border: var(--bd); background: var(--iris-soft); box-shadow: var(--pop-sm); }
.proposta .pn { font-family: var(--brand); font-weight: 800; font-size: 19px; line-height: 1.2; }
.proposta .why { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.proposta .why b { color: var(--ink); }
.proposta .principale { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--iris-ink); margin-top: 8px; }

/* la catena delle fasi */
.catena { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.catena .anello { font-size: 13.5px; font-weight: 700; padding: 5px 10px; border-radius: 10px; background: var(--paper); border: 1.5px solid var(--line); }
.catena .anello small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--muted); }
.catena .freccia { color: var(--faint); font-weight: 700; }

/* il blocco di sicurezza: calmo, niente allarme (brand manual) */
.fermo { border: var(--bd); border-radius: var(--r); background: var(--card); padding: 18px 16px; margin: 22px 0 12px; box-shadow: var(--pop-sm); }
.fermo h2 { font-size: 26px; margin-bottom: 10px; }
.fermo p { font-size: 15.5px; margin: 0 0 10px; }

/* un campo per scegliere il file del professionista */
.file-campo { cursor: pointer; }

/* ---------- il giorno: intestazione, passi, sera, giorno in corso (richiesta del 28 settembre) ---------- */
.testa-giorno { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  border: var(--bd); border-radius: var(--r); background: var(--card); box-shadow: var(--pop-sm); padding: 12px 14px; margin: 14px 0 4px; }
.testa-giorno .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--iris-soft); }
.testa-giorno .d { font-family: var(--brand); font-weight: 800; font-size: 17px; line-height: 1.2; }
.testa-giorno .s { font-size: 13.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.testa-giorno .ora-ora { font-family: var(--mono); font-size: 12px; color: var(--muted); align-self: start; }
.testa-giorno.f-sera { background: var(--obsidian); color: #fff; }
.testa-giorno.f-sera .ic { background: #232A45; }
.testa-giorno.f-sera .s, .testa-giorno.f-sera .ora-ora { color: #C9CCDA; }

.passi-giro { display: flex; gap: 4px; margin: 16px 0 2px; }
.passi-giro > div { flex: 1; min-width: 0; }
.passi-giro i { display: block; height: 5px; border-radius: 99px; background: var(--line); }
.passi-giro .fatto i { background: var(--iris); }
.passi-giro .ora i { background: var(--ink); }
.passi-giro .chiuso i { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.passi-giro small { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passi-giro .ora small { color: var(--ink); font-weight: 700; }
.sei-qui { font-size: 13px; font-weight: 600; color: var(--iris-ink); margin: 8px 0 0; }

.chiuso-fino { border: 1.5px dashed var(--faint); border-radius: 14px; padding: 11px 13px; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 12px 0; }
.chiuso-fino b { color: var(--ink); }
.chips .neutro { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

.salvato { text-align: center; padding: 26px 16px; }
.salvato .grande { font-size: 42px; line-height: 1; }
.salvato h3 { font-family: var(--brand); font-weight: 800; font-size: 21px; margin: 10px 0 6px; }

.in-corso { margin: 12px 0 4px; }
.barra-giorno { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.barra-giorno i { display: block; height: 100%; border-radius: 99px; background: var(--iris); }
.barra-giorno-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 5px; }

.scarti { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13.5px; }
.scarti .quando { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- le card del check-in: tipo, piano, pallino zero (richiesta del 28 settembre, punti 1, 10, 11) ----------
   Stesso bordo per tutte. Il fondo è appena tinto: si nota accostando due card, non guardandone una.
   Colori d'identità del brand manual, mai i semantici. «Dentro» è il verde d'interfaccia (Charlie, 2026-10-05), come nella legenda;
   il viola resta per «scelto» e «fatto». Scelta in decisioni.json → aspettoVoci. */
.voce { align-items: center; }
.voce.v-neg { background: #FFFCF6; }
.voce.v-pos { background: #F7FDFA; }
.voce.v-eli { background: var(--coral-soft); }

.etichette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.et-tipo, .et-piano { display: inline-block; border-radius: 6px; padding: 2px 7px; font-family: var(--testo); font-size: 11px; font-weight: 600; line-height: 1.35; }
.et-tipo.t-neg { background: var(--citron-soft); color: var(--citron-ink); }
.et-tipo.t-pos { background: var(--verde-soft); color: var(--verde-ink); }
.et-tipo.t-multi { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
/* il monito: leggibile, non in piccolo */
.et-piano { font-size: 12.5px; font-weight: 700; }
.et-piano.p-eliminato { background: #B4232C; color: #fff; }   /* brand manual del 6 ottobre: «tolta dal tuo piano» */
.et-piano.p-limitato { background: var(--citron); color: var(--obsidian); }

.quanto { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; min-width: 72px; }
.zdots { display: flex; align-items: center; gap: 4px; }
.zdots .z { width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; color: var(--faint); background: var(--paper); border: 1.5px solid var(--line); }
.v-neg .zdots .z.on { background: var(--verde); border-color: var(--verde); color: #fff; }
.v-pos .zdots .z.on { background: var(--faint); border-color: var(--faint); color: #fff; }
.zdots i { width: 10px; height: 10px; border-radius: 99px; background: #DFE4EE; border: 1px solid #CDD3E0; display: block; }
.zdots[data-e="dentro"] i.f { background: var(--verde); border-color: var(--verde); }
.zdots[data-e="limite"] i.f { background: var(--citron); border-color: var(--citron); }
.zdots[data-e="fuori"] i.f { background: var(--coral); border-color: var(--coral); }
.quanto .parola { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.voce-multi .multi-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.voce-multi .multi-testa .st { margin: 0; }
.voce-multi .conta { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--iris-ink); white-space: nowrap; }
.voce-multi .etichette { margin: 4px 0 8px; }

/* lo scossone: una volta sola, quando la card entra nello schermo */
.scossa { animation: scossa .6s ease-in-out 1; }
@keyframes scossa {
  0%, 100% { transform: none; }
  18% { transform: translateX(-4px) rotate(-.6deg); }
  36% { transform: translateX(4px) rotate(.6deg); }
  54% { transform: translateX(-3px) rotate(-.3deg); }
  72% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .scossa { animation: none; } }

/* ---------- dove mangi, a tendina (richiesta del 28 settembre, punto 4) ----------
   Registro in-app del brand manual: bordo sottile, ombra piccola sul momento aperto.
   L'apertura: altezza e dissolvenza, le voci che entrano una dopo l'altra. Con «riduci il movimento», subito. */
.mom { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 13px; margin-top: 10px; }
.mom.attivo { border: var(--bd); box-shadow: var(--pop-sm); }
.mom-h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mom-h .ok { margin-left: auto; font-size: 14px; letter-spacing: 0; color: var(--iris); }
.riassunto { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 4px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--brand); font-weight: 700; font-size: 15px; color: var(--iris-ink); animation: dissolvi .3s ease-out; }
.riassunto small { margin-left: auto; font-family: var(--testo); font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tendina { display: grid; grid-template-rows: 1fr; animation: apri .38s cubic-bezier(.2, .8, .2, 1); }
.tendina > div { overflow: hidden; min-height: 0; }
.sit-testa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--iris-soft); color: var(--iris-ink); font-family: var(--brand); font-weight: 700; font-size: 14px; }
.cambia-luogo { margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--testo); font-size: 12.5px; font-weight: 600;
  color: var(--iris-ink); text-decoration: underline; text-underline-offset: 3px; }
.sits { padding-left: 10px; margin-left: 12px; border-left: 2px solid var(--iris-soft); }
.entra { animation: entra .28s ease-out both; animation-delay: calc(var(--i) * 45ms); }
@keyframes apri { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tendina, .entra, .riassunto { animation: none; } }

/* l'allergia: tolta con le tracce. Più forte di «fuori»: Coral scuro pieno, testo bianco, bordo Obsidian */
.tog[data-s="allarme"] { background: var(--coral-ink); border-color: var(--obsidian); box-shadow: var(--pop-sm); }
.tog[data-s="allarme"] .tt, .tog[data-s="allarme"] .ts { color: #fff; }
.tog[data-s="allarme"] .pips i.f { background: #fff; border-color: #fff; }
.legenda .allarme { border-color: var(--obsidian); background: var(--coral-ink); }

/* ---------- i sintomi: quanto, com'era, quando (richiesta del 28 settembre, punto 7) ----------
   Tre grafiche diverse per tre domande diverse: i tasti a segmenti, le caselle, la linea della notte. */
.sy { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 13px; margin-top: 10px; }
.sy-testa { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sy-testa .em { font-size: 22px; }
.sy-testa b { font-family: var(--brand); font-weight: 800; font-size: 16px; }
.sy-testa .small { flex-basis: 100%; margin: -2px 0 0 33px; font-size: 12.5px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--paper); border-radius: 12px; padding: 3px; margin-top: 10px; }
.seg button { font-family: var(--brand); font-weight: 700; font-size: 14px; border: 0; background: transparent; border-radius: 9px; padding: 10px 4px; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"][data-i="assente"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1.5px var(--line); }
.seg button[aria-pressed="true"][data-i="lieve"] { background: var(--citron-soft); color: var(--citron-ink); box-shadow: 0 0 0 1.5px var(--citron); }
.seg button[aria-pressed="true"][data-i="forte"] { background: var(--coral-soft); color: var(--coral-ink); box-shadow: 0 0 0 1.5px var(--coral); }
.sotto-dom { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.qual { display: grid; gap: 6px; }
.qual button { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; text-align: left; cursor: pointer; color: var(--ink);
  border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 8px 10px; font: inherit; }
.qual button::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--faint); margin-top: 3px; }
.qual button[aria-pressed="true"] { border-color: var(--iris); background: var(--iris-soft); }
.qual button[aria-pressed="true"]::before { background: var(--iris); border-color: var(--iris); }
.qual b { display: block; font-family: var(--brand); font-weight: 700; font-size: 14px; }
.qual small { font-size: 12px; color: var(--muted); }
.quando { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; margin-top: 4px; }
.quando .ln { height: 2px; background: repeating-linear-gradient(90deg, var(--faint) 0 5px, transparent 5px 9px); }
.quando .mezzo { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.quando button { display: grid; justify-items: center; gap: 3px; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0; }
.quando button span { width: 44px; height: 44px; border-radius: 99px; display: grid; place-items: center; font-size: 20px; border: 1.5px solid var(--line); background: var(--card); }
.quando button[aria-pressed="true"] { color: var(--ink); }
.quando button[aria-pressed="true"] span { border: var(--bd); background: var(--obsidian); box-shadow: var(--pop-sm); }
.quando button.mattina[aria-pressed="true"] span { background: var(--citron-soft); }
.seg button:focus-visible, .qual button:focus-visible, .quando button:focus-visible, .riassunto:focus-visible, .cambia-luogo:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

/* ---------- andamento: i sintomi che contano (richiesta del 28 settembre, punto 8) ----------
   I colori dei livelli sono quelli del check-in dei sintomi: lieve Citron, forte Coral. Il livello si legge anche dall'asse. */
.obiettivo + .obiettivo { border-top: 1.5px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.obiettivo .titoletto { margin: 6px 0 4px; }
.grafico-sintomo { width: 100%; height: auto; display: block; }
.grafico-sintomo .g-griglia { stroke: var(--line); stroke-width: 1; }
.grafico-sintomo .g-et { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.grafico-sintomo .g-linea { fill: none; stroke: var(--faint); stroke-width: 1; stroke-opacity: .45; stroke-linejoin: round; }
.grafico-sintomo .g-p { stroke: var(--card); stroke-width: 1.5; }
.grafico-sintomo .l0 { fill: var(--faint); }
.grafico-sintomo .l1 { fill: var(--citron); }
.grafico-sintomo .l2, .grafico-sintomo .l3 { fill: var(--coral); }

/* i sintomi in Profilo: «lascia così» e «risolto», oppure «lascia così» e «nuovo» */
.sint-riga { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 11px; align-items: center;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 9px 12px; background: var(--card); }
.sint-riga .em { font-size: 20px; text-align: center; }
.sint-riga .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sint-riga .tt { font-weight: 700; font-size: 15px; }
.sint-riga .ts { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.seg2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper); border-radius: 10px; padding: 3px; margin-top: 4px; }
.seg2 button { font-family: var(--brand); font-weight: 700; font-size: 13.5px; border: 0; background: transparent; border-radius: 8px; padding: 8px 4px; cursor: pointer; color: var(--muted); }
.seg2 button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1.5px var(--line); }
.seg2 button[aria-pressed="true"][data-k="risolto"], .seg2 button[aria-pressed="true"][data-k="nuovo"] { background: var(--iris-soft); color: var(--iris-ink); box-shadow: 0 0 0 1.5px var(--iris); }
.seg2 button[disabled] { opacity: .35; cursor: not-allowed; }
.seg2 button:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }