:root {
  --bg: #FAF6F1;
  --bg-deep: #F3ECE3;
  --surface: #FFFFFF;
  --ink: #3A323C;
  --ink-soft: #8B7E8D;
  --line: #ECE3D9;
  --accent: #B4838F;
  --accent-deep: #97606F;
  --accent-soft: #F5E8EC;
  --violet: #9C8AB4;
  --violet-soft: #EFEAF5;
  --violet-deep: #6D5A8A;
  --danger: #B05555;
  --shadow-sm: 0 1px 2px rgba(58, 50, 60, 0.05);
  --shadow: 0 2px 6px rgba(58, 50, 60, 0.05), 0 10px 30px rgba(58, 50, 60, 0.06);
  --radius: 18px;
  --radius-sm: 12px;
}

/* Aspetto di Serena: temi colore (stesse tonalità morbide, colore diverso).
   Il rosa antico è il tema predefinito (:root); gli altri si attivano da
   Impostazioni → Aspetto di Serena.
   Le tinte "violet" (Fase attuale/Prossima tappa, chip evento, proposte)
   seguono il tema: il viola vero sta bene solo sul rosa — sugli altri
   temi diventa una seconda tinta ABBINATA al colore scelto. */
body[data-theme="grigio"] {
  --accent: #A39DA8; --accent-deep: #7E7885; --accent-soft: #EFEDF1;
  --violet: #908A9B; --violet-soft: #EEEDF2; --violet-deep: #665F73;
}
body[data-theme="verde"] {
  --accent: #8FA98B; --accent-deep: #6E8C6B; --accent-soft: #E9F1E7;
  --violet: #7E9887; --violet-soft: #E9F0EA; --violet-deep: #587263;
}
body[data-theme="azzurro"] {
  --accent: #8AA5C0; --accent-deep: #67849F; --accent-soft: #E8EFF5;
  --violet: #8296BB; --violet-soft: #EAEEF6; --violet-deep: #5A6E94;
}
body[data-theme="giallo"] {
  --accent: #C4AB72; --accent-deep: #A18A52; --accent-soft: #F6EFDC;
  --violet: #B3985F; --violet-soft: #F4EEDD; --violet-deep: #8A7342;
}
/* Bianco: Serena pulita e luminosa, fondo bianco e accenti neutri */
body[data-theme="bianco"] {
  --bg: #FFFFFF; --bg-deep: #F5F3F0; --line: #E9E5E0;
  --accent: #A8A2AA; --accent-deep: #5F5964; --accent-soft: #F2F1F4;
  --violet: #8D8794; --violet-soft: #F1F0F4; --violet-deep: #5C5664;
}
/* Nero: Serena scura. Qui cambia tutta la palette, non solo l'accento;
   l'accento "deep" è più CHIARO dell'accento perché fa da colore di testo. */
body[data-theme="nero"] {
  --bg: #211E24; --bg-deep: #1A171D; --surface: #2C2830;
  --ink: #ECE7EE; --ink-soft: #A89FAB; --line: #3B3640;
  --accent: #B4838F; --accent-deep: #D3A5B1; --accent-soft: #3E3239;
  --violet: #B3A3CB; --violet-soft: #352F3E; --violet-deep: #CBBFE0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-name, .overlay-title {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
}

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- HEADER ---------- */
/* "Serena" resta nel suo posto e scorre col contenuto; ricerca, filtri e SOS
   restano fissi in alto a destra e si sovrappongono a ciò che scorre. */
.app-header {
  display: flex;
  /* baseline e non center: il titolo di sezione deve POGGIARE sulla stessa
     linea del logo, non galleggiare a metà della sua altezza. Con corpi molto
     diversi (28 e 15px) il centro fa sembrare il titolo scivolato in basso. */
  align-items: baseline;
  justify-content: flex-start;
  padding: 16px 20px 10px;
  background: transparent;
}

.brand-name {
  font-size: 28px; font-weight: 600; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
}

/* Titolo di sezione il cui posto a schermo è la testata: qui resta solo per i
   lettori di schermo, così la pagina conserva la sua intestazione. */
.title-in-header {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- TITOLO DI SEZIONE AL POSTO DEL LOGO — regola unica ----
   Decisione del presidente (26 lug, secondo giro): nelle sezioni il titolo
   NON affianca «Serena», lo SOSTITUISCE — stessa posizione, stessa grandezza,
   stesso peso, stesso colore. In alto a sinistra si legge «Diario», «Famiglia»,
   «Consigli». «Serena» resta in Home e in chat.
   Vale per tutte e tre allo stesso modo: cambia solo la parola.

   PERCHÉ SI PUÒ. Togliere «Serena» libera i suoi 87,7px, e il titolo da solo
   entra a 28px a QUALSIASI larghezza: a 320px — il caso peggiore — «Famiglia»
   (110,7px) lascia ancora 17,2px prima delle azioni. Per questo è caduto il
   ripiego «sotto i 375 il titolo torna in pagina»: non serve più, e il
   guadagno di una riga verticale vale ora a ogni schermo.

   Il contrasto qui non è più un problema aperto: a 28px il testo è "grande"
   ai fini WCAG (≥24px), quindi --accent (#B4838F, ~3,2:1) soddisfa AA, che per
   il testo grande chiede 3:1. Alla misura precedente di 15px non era così. */
.brand-section {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 28px;
  color: var(--accent); line-height: 1; white-space: nowrap;
}
/* Quando la sezione ha il suo titolo, il marchio lascia il posto. */
.app-header.section-title .brand-name { display: none; }

/* Ancorate al bordo destro dell'APP (max 480px, centrata), non della finestra:
   su schermi larghi non escono fuori; su telefono il viewport coincide con l'app. */
/* top tiene conto della banda d'ambiente (DEV/PROD): --env-bar-h è misurata e
   pubblicata da supabaseConfig.js; senza banda (produzione) vale 0 → top 16px. */
.header-actions { position: fixed; top: calc(16px + var(--env-bar-h, 0px)); right: max(20px, calc(50% - 220px)); z-index: 60; }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Barra del contesto attivo (multi-famiglia) */
.context-bar { padding: 0 20px 8px; }
.context-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-family: 'Inter', sans-serif; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.context-chip:hover { background: var(--bg-deep); border-color: var(--accent-soft); }
.context-chip .ctx-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.context-chip .ctx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-chip .ctx-text strong { color: var(--accent-deep); font-weight: 700; }
.context-chip .ctx-caret { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }
/* Menu a tendina dei contesti */
.context-menu {
  position: absolute; z-index: 70; min-width: 220px; max-width: 300px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(58, 50, 60, 0.18); padding: 6px; overflow: hidden;
}
.context-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 8px; background: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.context-menu-item:hover { background: var(--bg-deep); }
.context-menu-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.context-menu-item .cmi-check { margin-left: auto; font-weight: 700; color: var(--accent-deep); }
.context-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { color: var(--accent-deep); border-color: var(--accent); }
.icon-btn.active { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); }
.icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.icon-btn svg { width: 19px; height: 19px; }

.sos-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* ---------- BARRE DI SCORRIMENTO — una regola per tutta l'app ----------
   Decisione del presidente (30 lug): mai una barra grigia di sistema in mezzo
   alla grafica di Serena. Sottile (5px, dalla barra della chat), SENZA canale
   grigio — il pollice galleggia sul contenuto, non scorre in una scanalatura —
   nei toni del marchio, e c'è soltanto quando il contenuto continua davvero.
   Sotto il puntatore si rinforza all'accento scuro.
   Il colore è pieno e non trasparente per una ragione misurata: l'accento al
   40% (il valore di .scroll-quiet) su fondo chiaro dà 1,48:1 — si perde. Pieno
   dà 2,96:1, cioè la soglia di 3:1 per un elemento d'interfaccia: resta
   percepibile, che è la richiesta.
   Chi la nasconde di proposito ha regole più specifiche e resta com'è: .views
   (col suo motivo scritto qui sotto) e i caroselli orizzontali, che dicono con
   i puntini e con la card sbirciante che il contenuto continua. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------- LAYOUT ---------- */
.views {
  flex: 1;
  padding: 6px 20px 110px;
  overflow-y: auto;
  /* Niente barra di scorrimento visibile (stile app): durante lo sfoglio 3D
     del diario il foglio in prospettiva "gonfia" l'area di scroll e la barra
     lampeggiava sulla destra come un bug. Si scorre come sempre. */
  scrollbar-width: none;
}
.views::-webkit-scrollbar { display: none; }

.view { display: none; animation: fadeIn 0.3s ease; }
.view.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.greeting {
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 12px;
}
.page-title { font-size: 27px; margin: 0 0 6px; font-weight: 600; }
.page-title.small { font-size: 21px; margin: 0; }
.page-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.page-sub.small { margin: 0; font-size: 12.5px; }

/* Header Home */
.header-age { font-size: 14px; font-weight: 600; color: var(--accent-deep); margin: 0 0 4px; }
.header-motto { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 14px; }

/* Family Journey */
.journey-card { padding: 14px 16px; }
.journey-rows { display: flex; gap: 12px; }
/* Fondo e bordo derivano dalla tinta del tema (niente viola fisso) */
.journey-row { flex: 1; background: color-mix(in srgb, var(--violet-soft) 45%, var(--surface)); border: 1px solid var(--violet-soft); border-radius: var(--radius-sm); padding: 9px 12px; }
.journey-row span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); margin-bottom: 2px; }
.journey-row strong { font-size: 13px; color: var(--ink); }

/* Oggi con Serena — digest */
.today-digest { display: flex; flex-direction: column; }
.digest-row {
  text-align: left;
  background: none; border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; color: var(--ink);
  padding: 7px 0; margin: 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.digest-row:last-child { border-bottom: none; }
button.digest-row { cursor: pointer; color: var(--accent-deep); font-weight: 600; }

/* Priorità promemoria */
.prio-chip {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px;
  background: var(--bg-deep); color: var(--ink-soft);
}
.prio-chip.high { background: var(--accent-soft); color: var(--accent-deep); }
.prio-chip.mid { background: var(--violet-soft); color: var(--violet); }

/* Appuntamenti: conto alla rovescia */
.r-countdown { font-size: 11.5px; font-weight: 600; color: var(--accent-deep); margin-top: 2px; }
#openCalendarBtn { margin-top: 12px; margin-bottom: 0; }

/* Ricordo del Momento */
.moment-reason {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 4px 11px;
  margin: 0 0 8px;
}

.journey-chip {
  display: inline-block;
  background: var(--violet-soft);
  color: var(--violet);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

#nextReminderCard { cursor: pointer; transition: border-color 0.15s ease; }
#nextReminderCard:hover { border-color: var(--accent); }

/* Elenco scorrevole: circa 3 appuntamenti visibili alla volta */
.next-reminders { max-height: 172px; overflow-y: auto; }

/* Selettore membri per gli eventi del calendario */
.member-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.member-check {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  background: var(--surface);
}
.member-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
/* .member-check input: forma e bersaglio vengono dalla regola centrale in fondo al file. */
.r-members { color: var(--violet); font-weight: 600; }
.card-title { font-size: 15.5px; font-weight: 600; margin: 0 0 10px; }

.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent-deep); font-weight: 600; font-size: 13px;
  font-family: 'Inter', sans-serif; padding: 0;
}

.btn-primary {
  background: var(--accent-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--accent); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.btn-ghost.danger { color: var(--danger); border-color: #E4C3C3; }

.btn-block { display: block; width: 100%; margin-bottom: 10px; }

.empty-note { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 4px 0; }

/* ---------- OGGI ---------- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.qa-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.qa-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.qa-tile svg { width: 21px; height: 21px; color: var(--accent-deep); }
.qa-tile span { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25; }

.summary-row { display: flex; gap: 10px; }
.summary-item {
  flex: 1;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
}
.summary-item strong { display: block; font-size: 20px; font-weight: 700; color: var(--accent-deep); }
.summary-item span { font-size: 11.5px; color: var(--ink-soft); }

/* "Oggi con Serena" compatta: tutto su una riga */
#todaySummaryCard { padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
#todaySummaryCard .card-title { margin: 0; font-size: 13px; flex-shrink: 0; }
#todaySummaryCard .summary-row { flex: 1; gap: 6px; }
#todaySummaryCard .summary-item {
  padding: 6px 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
#todaySummaryCard .summary-item strong { display: inline; font-size: 15px; }
#todaySummaryCard .summary-item span { font-size: 10.5px; white-space: nowrap; }

@media (max-width: 430px) {
  #todaySummaryCard { flex-direction: column; align-items: stretch; gap: 5px; padding: 9px 12px; }
  #todaySummaryCard .summary-row { gap: 5px; }
  #todaySummaryCard .summary-item { padding: 4px 4px; }
  #todaySummaryCard .summary-item strong { font-size: 13.5px; }
  #todaySummaryCard .summary-item span { font-size: 9.5px; }
}

.reminder-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.reminder-item:last-child { border-bottom: none; }
.reminder-item .r-title { font-weight: 600; font-size: 14px; }
.reminder-item .r-date { color: var(--ink-soft); font-size: 12.5px; }
.reminder-item button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 4px; }
.reminder-item button svg { width: 16px; height: 16px; }
/* Allegato di una visita: stessa pastiglia tonda della riga referto
   (.activity-row .p-actions .pc-cal). Il bersaglio è 44px pieni; i margini
   negativi lo riassorbono nel padding già esistente della riga, così la riga
   non si alza. Il cestino accanto resta esattamente com'è. */
.reminder-item .ri-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.reminder-item .ri-actions .pc-cal {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; margin: -11px 0; padding: 0;
  border: none; background: none; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-deep);
}
.reminder-item .ri-actions .pc-cal::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
}
.reminder-item .ri-actions .pc-cal svg { width: 17px; height: 17px; position: relative; }
.reminder-item .ri-actions .pc-cal:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -8px; border-radius: 50%; }

/* Oggi Serena ti consiglia */
.suggestion-text { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.suggestion-guide { font-weight: 600; font-size: 13.5px; color: var(--accent-deep); margin: 0 0 6px; }
.suggestion-why { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 0 12px; }
#suggestionCard .btn-ghost { padding: 9px 18px; font-size: 13px; }

/* ---------- RICORDI ---------- */
.search-inline {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  margin-bottom: 14px;
}
.search-inline svg { width: 17px; height: 17px; color: var(--ink-soft); flex-shrink: 0; }
.search-inline input {
  flex: 1; border: none; background: none; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
}

.tabs { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.tab-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Righe scorrevoli senza barra visibile: si scorre con dito o trascinando. */
.scroll-tabs, .diary-controls, .diary-strip { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.scroll-tabs::-webkit-scrollbar, .diary-controls::-webkit-scrollbar, .diary-strip::-webkit-scrollbar { width: 0; height: 0; display: none; }
.scroll-tabs.dragging, .diary-controls.dragging, .diary-strip.dragging { cursor: grabbing; user-select: none; }

/* Tab piatti su una riga scorrevole, con icona e sottolineatura (niente box
   bianchi): usati in Ricordi, Famiglia e Consigli per uno stile coerente. */
.scroll-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 0; -webkit-overflow-scrolling: touch; }
.scroll-tabs .tab-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; border-radius: 0;
  padding: 8px 10px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft); white-space: nowrap;
}
.scroll-tabs .tab-btn svg { width: 16px; height: 16px; }
.scroll-tabs .tab-btn.active {
  background: none; color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}
.scroll-tabs .tab-btn.danger-tab.active { background: none; color: var(--danger); border-bottom-color: var(--danger); }

/* Tab Famiglia su UNA riga (5 voci): si stringono per stare tutte visibili. */
.fam-tabs-fit { overflow-x: visible; gap: 2px; }
.fam-tabs-fit .tab-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 2px 11px; font-size: 11px; gap: 3px; }
.fam-tabs-fit .tab-btn svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 360px) { .fam-tabs-fit .tab-btn svg { display: none; } }

/* Sotto-navigazione dell'hub Calendario: pill compatte (secondarie rispetto
   ai 3 tab principali), su una riga scorrevole senza box. */
.cal-hub-nav { border-bottom: none; gap: 6px; margin: 2px 0 14px; }
.cal-hub-nav .tab-btn {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; margin: 0; color: var(--ink-soft);
}
.cal-hub-nav .tab-btn svg { width: 14px; height: 14px; }
.cal-hub-nav .tab-btn.active {
  background: var(--accent-soft); color: var(--accent-deep);
  border-color: transparent; border-bottom-color: transparent;
}

/* Barra compatta del Calendario (stile Samsung): tendina-persona di sola
   scritta a sinistra, lente a destra. Niente contorni, come nel Diario. */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 12px; }
.cal-tool { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cal-tool > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tool svg { fill: none; stroke: currentColor; }
.cal-who .ct-caret { width: 12px; height: 12px; flex: none; stroke-width: 2; transform: rotate(90deg); }
.cal-tool-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.cal-search-row { margin-bottom: 12px; }
.cal-day-add { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.cal-day-add svg { width: 18px; height: 18px; }

/* Schermata "Nuovo elemento / Modifica" a PAGINA INTERA (stile Samsung):
   intestazione con Indietro · titolo · Salva, corpo scorrevole coi campi. */
/* Colonna-telefono anche su desktop (come .app-shell): centrata, non a tutto
   schermo sul PC. (Un fixed con inset:0 + margin auto NON si centra: uso il
   transform.) */
@keyframes calEditorIn { from { opacity: 0; } to { opacity: 1; } }
/* La barra di navigazione RESTA VISIBILE anche qui (decisione del presidente,
   30 lug): il modulo si ferma sopra la barra invece di coprirla. L'altezza
   arriva da --nav-h, MISURATA sulla barra vera da app.js (cambia con la safe
   area e col testo ingrandito); se il JS non ha ancora misurato vale 0, cioè
   il comportamento di prima. Vale per i due moduli che usano questa classe:
   #reminderForm (evento e promemoria) e #calSearchPage (ricerca calendario).
   La testata del modulo — «Indietro» e «Salva» — è flex:0 0 auto e il corpo
   scorre: togliere altezza stringe il corpo, non nasconde i comandi. */
.cal-editor { position: fixed; top: 0; bottom: var(--nav-h, 0px); left: 50%; transform: translateX(-50%); z-index: 500; width: 100%; max-width: 480px; background: var(--bg); box-shadow: 0 0 40px rgba(0,0,0,0.12); display: flex; flex-direction: column; animation: calEditorIn 0.15s ease; }
.cal-editor[hidden] { display: none; }
/* La domanda di uscita nasce SOPRA il modulo evento (z-index 500): senza
   questa regola erediterebbe il 100 degli overlay e finirebbe dietro al
   modulo da cui nasce — aperta ma invisibile. */
#reminderExitOverlay { z-index: 560; }
.cal-editor-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.cal-editor-head .icon-btn svg { fill: none; stroke: currentColor; width: 22px; height: 22px; }
.cal-editor-title { flex: 1; margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.cal-editor-save { padding: 8px 20px; font-size: 14px; flex: 0 0 auto; }
.cal-editor-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.cal-editor-body .cal-type-toggle { margin-bottom: 4px; }

/* Ricerca a pagina intera (trasversale). */
.cal-search-head { gap: 8px; }
.cal-search-field { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg-deep); border-radius: 999px; padding: 9px 14px; }
.cal-search-field .ls-icon { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.cal-search-field input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink); }
.cal-search-clear { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 0; display: flex; flex: none; }
.cal-search-clear svg { width: 16px; height: 16px; }
.cal-search-results { gap: 0; padding: 4px 14px 16px; }
.search-res-group { margin: 14px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.search-res-group:first-child { margin-top: 4px; }
.search-res-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.search-res-row:hover .search-res-title { color: var(--accent-deep); }
.search-res-ico { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.search-res-ico svg { width: 17px; height: 17px; }
.search-res-main { flex: 1; min-width: 0; }
.search-res-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-res-sub { margin: 1px 0 0; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== SERENA NOTES (note + checklist unificate, stile Samsung Notes) ===== */
/* Testata Note su UNA riga: titolo + ☰ menù generale + toggle + ricerca */
.note-head { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; flex-wrap: nowrap; }
.note-head .page-title { margin: 0; font-size: 19px; flex: 0 0 auto; }
/* ☰ a sinistra del titolo, SENZA cerchio: solo le tre lineette */
.note-menu-btn { flex: 0 0 auto; background: none; border: none; padding: 4px 6px 4px 0; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; }
.note-menu-btn svg { fill: none; stroke: currentColor; width: 24px; height: 24px; }
.note-search-btn { flex: 0 0 auto; width: 38px; height: 38px; }
.note-search-btn svg { fill: none; stroke: currentColor; width: 20px; height: 20px; }
.note-collection-label { margin: 0 2px 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); }
/* Toggle segmentato Note | Checklist, sulla stessa riga del titolo, spinto a destra */
.note-seg { display: inline-flex; flex: 0 0 auto; margin: 0 auto; background: var(--bg-deep); border-radius: 999px; padding: 3px; gap: 2px; }
.note-seg-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; border-radius: 999px; padding: 6px 11px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.note-seg-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.note-seg-btn.active { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.note-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 90px; }
/* Selezione multipla (pressione lunga su una card) */
.note-select-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 12px; background: var(--accent-soft); border-radius: 14px; }
.note-select-bar[hidden] { display: none; }
.note-select-bar .icon-btn { color: var(--accent-deep); }
.note-select-bar .icon-btn svg { fill: none; stroke: currentColor; width: 20px; height: 20px; }
.nsb-count { font-weight: 700; color: var(--accent-deep); font-size: 14.5px; }
.nsb-spacer { flex: 1 1 auto; }
.note-card.selected { outline: 2px solid var(--accent-deep); outline-offset: -1px; background: var(--accent-soft); }
/* Testata del dettaglio checklist, IN LINEA con l'editor nota: chevron indietro
   + titolo + un solo ⋮. */
.note-cl-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.note-cl-head .icon-btn svg { fill: none; stroke: currentColor; width: 22px; height: 22px; }
.note-cl-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Foglio pulito come una nota: la card perde bordo/box, il titolo (sta in testata)
   e il suo menu interno "Azioni" (le azioni vivono nel ⋮ della testata). */
#famNoteChecklistBody .advice-card { border: none; box-shadow: none; padding: 0; background: none; }
#famNoteChecklistBody .advice-card > .advice-title { display: none; }
#famNoteChecklistBody .cl-actions-menu { display: none; }
#famNoteChecklistBody .checklist-group-title { display: none; }
.note-group { margin: 6px 2px 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
.note-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-sm); }
.note-card:hover { border-color: var(--accent); }
.note-card .nc-top, .note-card .clc-head { display: flex; align-items: center; gap: 8px; }
.note-card .nc-ico { font-size: 15px; flex: none; }
.note-card .nc-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-card .nc-preview { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-card .nc-date { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.kind-checklist { border-left: 3px solid var(--good); }
.clc-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.clc-bar { flex: 1; height: 7px; background: var(--bg-deep); border-radius: 999px; overflow: hidden; }
.clc-bar span { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width 0.3s ease; }
.clc-count { font-size: 12px; font-weight: 700; color: var(--good); flex: none; }
.clc-items { display: flex; flex-direction: column; gap: 2px; }
.clc-item { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-item.done { color: var(--ink-soft); text-decoration: line-through; }
.clc-more { margin: 6px 0 0; font-size: 12px; color: var(--accent-deep); font-weight: 600; }
.clc-assign { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.clc-assign svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }

/* Note della famiglia (hub Calendario) */
.note-item { align-items: flex-start; }
.note-item .note-main { flex: 1; min-width: 0; }
.note-item .note-text { font-size: 13px; color: var(--ink-soft); margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.note-item .note-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.note-item .note-actions .icon-btn { width: 30px; height: 30px; color: var(--ink-soft); }
.note-item .note-actions .icon-btn svg { width: 16px; height: 16px; }

/* --- Editor Note a schermo intero: foglio bianco (testo + caselle) + tela di disegno --- */
/* Terza via, decisa dal presidente il 30 lug: la barra di navigazione c'è
   MENTRE SI SCRIVE — la navigazione dev'essere sempre raggiungibile — e
   sparisce MENTRE SI DISEGNA, perché un tratto verso il bordo finirebbe sul
   pulsante Serena e uscirebbe dalla nota: peggio del problema che si risolve.
   Lo stato `drawing` esisteva già (lo mette setNoteTool).
   Il foglio NON si sposta al cambio di modalità: cresce solo verso il basso,
   e testo e tratti sono ancorati in alto a sinistra (i tratti sono punti in
   px ridisegnati, mai riscalati). L'uscita in alto resta al suo posto in
   entrambe le modalità: la testata non è mai nascosta. */
.note-editor { position: fixed; top: 0; bottom: var(--nav-h, 0px); left: 50%; transform: translateX(-50%); z-index: 520; width: 100%; max-width: 480px; background: var(--bg); box-shadow: 0 0 40px rgba(0,0,0,0.14); display: flex; flex-direction: column; animation: calEditorIn 0.15s ease; }
.note-editor.drawing { bottom: 0; }
.note-editor[hidden] { display: none; }
.note-editor-head { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 2px; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.note-editor-head .icon-btn { width: 40px; height: 40px; color: var(--ink-soft); flex: none; }
.note-editor-head .icon-btn svg { fill: none; stroke: currentColor; width: 22px; height: 22px; }
.note-editor-title { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 700; color: var(--ink); padding: 6px 4px; }
.note-editor-title::placeholder { color: var(--ink-soft); opacity: 0.65; }

.note-tools { display: flex; align-items: center; gap: 2px; padding: 4px 8px; flex: 0 0 auto; background: var(--bg-deep); overflow-x: auto; }
.note-tool { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; color: var(--ink-soft); cursor: pointer; }
.note-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.note-tool.active { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.note-tool:disabled { opacity: 0.34; cursor: default; }
.note-tools-spacer { flex: 1 1 auto; }

.note-pens { display: flex; align-items: center; gap: 14px; padding: 9px 18px; flex: 0 0 auto; background: var(--bg-deep); border-top: 1px solid var(--line); }
.note-pens[hidden] { display: none; }
.note-pen { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; flex: none; box-shadow: 0 0 0 1px var(--line) inset; }
.note-pen.active { border-color: var(--ink); }

.note-sheet { position: relative; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.note-rich { position: relative; z-index: 1; min-height: 100%; box-sizing: border-box; padding: 16px 18px 42vh; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); outline: none; word-break: break-word; }
.note-rich.is-empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.65; pointer-events: none; }
.note-canvas { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; touch-action: none; }
.note-editor.drawing .note-canvas { pointer-events: auto; }
.note-editor.drawing .note-rich { -webkit-user-select: none; user-select: none; }
.note-editor.drawing.mode-pen .note-canvas, .note-editor.drawing.mode-highlighter .note-canvas { cursor: crosshair; }
.note-editor.drawing.mode-eraser .note-canvas { cursor: cell; }
.note-editor.drawing .note-format { display: none; }

/* Righe checklist dentro la nota (testo + casella nello stesso foglio) */
.note-rich .nck { display: flex; align-items: flex-start; gap: 9px; margin: 3px 0; }
.note-rich .nck-box { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--ink-soft); border-radius: 5px; cursor: pointer; position: relative; }
.note-rich .nck-t { flex: 1; min-width: 0; }
.note-rich .nck[data-done="1"] .nck-box { background: var(--good); border-color: var(--good); }
.note-rich .nck[data-done="1"] .nck-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.note-rich .nck[data-done="1"] .nck-t { text-decoration: line-through; color: var(--ink-soft); }

/* Allegati nella nota: foto (piena larghezza), documenti (chip), link */
.note-rich img.note-img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.note-rich .note-attach { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 13px; margin: 3px 2px; border-radius: 999px; background: var(--bg-deep); color: var(--ink); text-decoration: none; font-size: 14px; vertical-align: middle; }
.note-rich .note-attach svg { width: 16px; height: 16px; fill: none; stroke: currentColor; flex: none; }
.note-rich .note-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-rich .note-link { color: var(--accent-deep); text-decoration: underline; word-break: break-word; }

/* Chip di collegamento sotto il titolo (nota ↔ evento/routine) */
.note-link-row { flex: 0 0 auto; padding: 8px 14px 0; }
.note-link-row[hidden] { display: none; }
.note-link-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13.5px; cursor: pointer; }
.note-link-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.note-link-chip .nlc-ico { flex: none; }
.note-link-chip .nlc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note-format { display: flex; align-items: center; gap: 2px; padding: 6px 10px; flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.note-format .nf-btn { flex: none; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 10px; color: var(--ink); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 17px; }
.note-format .nf-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.note-format .nf-btn.on { background: var(--accent-soft); color: var(--accent-deep); }
.note-format .nf-bold { font-weight: 800; }
.note-format .nf-italic { font-style: italic; font-family: Georgia, serif; }
.note-format .nf-underline { text-decoration: underline; }
.note-format .nf-sep { width: 1px; align-self: stretch; margin: 6px 6px; background: var(--line); flex: none; }

.note-editor.reading .note-tools, .note-editor.reading .note-format, .note-editor.reading .note-pens { display: none; }

.memory-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.memory-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.memory-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.memory-date { font-size: 12px; color: var(--ink-soft); }
.memory-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.memory-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  border-radius: 999px; padding: 3px 9px;
  background: var(--bg-deep); color: var(--ink-soft);
}
.memory-badge.first { background: var(--violet-soft); color: var(--violet); }
.memory-badge.heart { background: var(--accent-soft); color: var(--accent-deep); }
.memory-title { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.memory-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; margin: 0; }
.memory-photo { width: 100%; border-radius: var(--radius-sm); margin-top: 10px; display: block; }
.memory-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.memory-actions button {
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-soft); font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif;
}
.memory-actions button svg { width: 15px; height: 15px; }
.memory-actions button.heart-on { color: var(--accent-deep); }
.memory-actions button.heart-on svg { fill: var(--accent-soft); }

.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.album-cell { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.album-cell img { width: 100%; height: 150px; object-fit: cover; display: block; }

/* ---------- CHAT ---------- */
.chat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.chat-header-actions { display: flex; gap: 7px; }
/* Titolo "Serena" in chat: chip beige pieno; carattere e colore IDENTICI al
   "Serena" della Home (Playfair Display, tinta accent). */
.chat-title-wrap { position: relative; display: inline-flex; align-items: center; margin-left: -8px; }
/* …e i tasti azione un filo verso destra, per respirare di più ai lati. */
.chat-header .chat-header-actions { margin-right: -8px; }
.chat-header .page-title {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: var(--bg); /* beige chiarissimo, come lo sfondo dell'app */
  border: 1px solid var(--line);
  border-radius: 999px;
  /* 3px sotto compensano la metrica del Playfair: inchiostro perfettamente
     centrato nel chip (verificato misurando il bounding box dei glifi). */
  padding: 0 18px 3px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.chat-header .page-title:hover { background: var(--line); }
/* Tasti della chat proporzionati all'altezza del chip del titolo. */
.chat-header-actions .icon-btn { width: 44px; height: 44px; }
/* Frase empatica a rotazione, compare al passaggio/click su "Serena". */
.serena-tagline {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 6;
  background: var(--accent-deep); color: #fff;
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  /* Le frasi lunghe (benvenuto, suggerimenti d'uso) vanno a capo. */
  white-space: normal; width: max-content; max-width: min(76vw, 320px);
  padding: 6px 12px; border-radius: 12px; box-shadow: var(--shadow);
  animation: fadeIn 0.2s ease;
}
.serena-tagline::before {
  content: ''; position: absolute; bottom: 100%; left: 18px;
  border: 5px solid transparent; border-bottom-color: var(--accent-deep);
}
/* Tasti azione della chat: stesso chip dei pulsanti della Home (.icon-btn:
   fondo bianco, bordo sottile, ombra leggera) — nessun override. */
.chat-header-actions .icon-btn:hover { color: var(--accent-deep); }
/* Effetto sovrapposizione: in chat l'intestazione è trasparente e sta SOPRA
   l'area messaggi; scorrendo, i messaggi passano sotto le icone. */
body.chat-mode #view-serena.active { position: relative; }
body.chat-mode .chat-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  margin-bottom: 0; padding: 2px 0; background: transparent;
  pointer-events: none;
}
body.chat-mode .chat-header > * { pointer-events: auto; }
body.chat-mode .chat-window { padding-top: 50px; }

.chat-window {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  margin-bottom: 8px;
  /* La barra della chat non ha più regole sue: era l'unica già in tinta, ed è
     la sorgente dei 5px della regola unica. Ora la eredita come tutte le
     altre — il pollice passa da --line (grigio caldo) all'accento. */
}

.bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  animation: fadeIn 0.25s ease;
}
.bubble.serena {
  background: var(--surface);
  border: 1px solid var(--line);
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-sm);
}
.bubble.user {
  background: var(--accent-soft);
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.bubble.risk { border-left: 3px solid var(--accent-deep); }
.bubble.notice {
  background: var(--bg-deep);
  border: none;
  font-size: 13px;
  border-left: 3px solid var(--violet);
}
.bubble.action-confirm { border-left: 3px solid var(--accent-deep); max-width: 90%; }
.bubble.action-confirm .ac-desc { margin: 0 0 10px; font-weight: 600; font-size: 13.5px; }
.bubble.action-confirm .ac-buttons { display: flex; gap: 8px; }
.bubble.action-confirm .ac-buttons button { padding: 8px 18px; font-size: 13px; }

/* SRD-013: titoli di gruppo nella lista checklist (In evidenza / Tutte) */
.checklist-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600;
  margin: 14px 2px 6px;
  color: var(--ink);
}
.checklist-group-title:first-child { margin-top: 2px; }
.advice-card .cl-assignform .member-check { margin-top: 6px; }
/* SRD-013: aggiunta voce con pulsante "+" (mobile) accanto al campo */
.cl-additem-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cl-additem-row input { flex: 1 1 auto; }
.cl-additem-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--accent-deep); color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-additem-btn svg { width: 20px; height: 20px; }
.cl-additem-btn:hover { background: var(--accent); }

/* SRD-013: menù azioni a tendina della checklist (in basso a destra) */
.cl-actions-menu { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-end; }
.cl-actions-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--ink-soft); cursor: pointer;
}
.cl-actions-toggle svg { width: 16px; height: 16px; }
.cl-actions-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.cl-actions-toggle.open { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
.cl-actions-list { margin-top: 8px; justify-content: flex-end; }

/* Addendum ADS-013: accordion della schermata Checklist della Famiglia */
.cl-accordion { margin: 10px 0; }
.cl-accordion-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-deep, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.cl-accordion-head.static { cursor: default; background: transparent; border: none; padding: 6px 2px; }
.cl-accordion-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.cl-accordion-count {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center;
}
.cl-accordion-chevron { width: 16px; height: 16px; color: var(--ink-soft); transform: rotate(90deg); transition: transform 0.2s ease; }
.cl-accordion.open .cl-accordion-chevron { transform: rotate(-90deg); }
.cl-accordion-body { margin-top: 8px; }

/* Badge urgenza sulle checklist */
.cl-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: middle; font-family: 'Inter', sans-serif; }
.cl-badge-today { background: var(--accent-soft); color: var(--accent-deep); }
.cl-badge-late { background: #F4D9D9; color: var(--danger); }

/* SRD-013: assegnazione ai membri con chip discrete (niente checkbox in mezzo) */
.assign-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.assign-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.assign-chip:hover { border-color: var(--accent); }
.assign-chip.on {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: var(--accent);
  font-weight: 600;
}

/* Anteprima voci dei modelli consigliati (SRD-013 v2.0) */
.advice-card .tpl-items { list-style: disc; margin: 4px 0 10px; padding-left: 22px; }
.advice-card .tpl-items li { margin-bottom: 5px; line-height: 1.45; }

/* SRD-12: rendering strutturato di testi ed elenchi nelle bolle di Serena.
   Il contenuto ricco non usa più il pre-wrap: paragrafi ed elenchi sono
   veri elementi HTML, così i pallini si vedono corretti ovunque. */
.bubble .rich, .bubble.rich { white-space: normal; }
.rich p { margin: 0 0 8px; }
.rich p:last-child { margin-bottom: 0; }
.rich ul.rich-list, .rich ol.rich-list {
  margin: 8px 0;
  padding-left: 22px;
}
.rich ul.rich-list { list-style-type: disc; }
.rich ol.rich-list { list-style-type: decimal; }
.rich .rich-list:last-child { margin-bottom: 0; }
.rich .rich-list:first-child { margin-top: 0; }
.rich .rich-list li { margin-bottom: 6px; line-height: 1.45; }
.rich .rich-list li:last-child { margin-bottom: 0; }
/* Checklist: veri checkbox, non simboli nel testo. */
.rich ul.rich-check {
  list-style: none;
  padding-left: 2px;
}
.rich ul.rich-check li { margin-bottom: 6px; }
.rich ul.rich-check label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: default;
}
/* Checklist dentro un testo di Serena: sono di sola lettura (disabled). Forma e
   bersaglio vengono dalla regola centrale; qui resta solo l'allineamento alla
   prima riga del testo, che con un bersaglio di 44px va ricalcolato. */
.rich ul.rich-check input[type="checkbox"] {
  margin: -11px -11px -11px -11px;
  flex: 0 0 auto;
}
/* Link nelle risposte di Serena: veri collegamenti cliccabili (sito, prodotto,
   mappa), riconoscibili ma coerenti con il tono caldo delle bolle. */
.rich a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.rich a:hover { color: var(--accent); }

.typing-indicator {
  display: flex; gap: 4px; padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: fit-content;
  margin-bottom: 8px;
}
.typing-indicator span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.voice-status { font-size: 12.5px; color: var(--accent-deep); text-align: center; font-weight: 600; margin: 0 0 8px; }

.offline-banner {
  font-size: 12.5px; color: var(--ink);
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.45;
}

/* Modalità chat: solo i messaggi scorrono, il resto resta fermo */
body.chat-mode .app-shell { height: 100vh; height: 100dvh; }
/* In chat mostriamo solo la chat: via l'header dell'app (logo Serena, ricerca,
   impostazioni, SOS). La chat ha già la sua intestazione. */
body.chat-mode .app-header { display: none; }
/* In chat la nav è comunque fissa: basta lo spazio per non coprirla, niente
   grande vuoto sotto il disclaimer. */
body.chat-mode .views { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 82px; }
/* Disclaimer compatto e vicino alla barra di navigazione, niente spazio sprecato. */
body.chat-mode .disclaimer { font-size: 9.5px; line-height: 1.35; margin: 4px 0 0; }
body.chat-mode #view-serena.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.chat-mode .chat-window {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* Composer in stile ChatGPT: una sola riga (pill) quando il testo ci sta; se
   il testo va a capo, la textarea occupa la riga in alto e i pulsanti scendono
   in basso (+ a sinistra, invio a destra). Ottenuto con flex-wrap + order:
   in stato "multiline" la textarea prende tutta la larghezza e spinge i
   pulsanti sulla riga sotto. */
.chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 5px 8px;
  box-shadow: var(--shadow-sm);
}
.chat-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.chat-form .comp-plus { order: 1; }
.chat-form textarea { order: 2; }
.chat-form .comp-mic { order: 3; }
.chat-form .comp-send { order: 4; }

.chat-form textarea {
  flex: 1 1 60px;
  min-width: 60px;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 8px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  resize: none;
  overflow-y: auto;
  max-height: 42vh;
  min-height: 30px;
  box-sizing: border-box;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* Edge/IE */
}
.chat-form textarea::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.chat-form textarea::placeholder { color: var(--ink-soft); }
.chat-form textarea:focus { outline: none; }

/* Stato "testo su più righe": la textarea prende tutta la larghezza in alto e
   i pulsanti vanno sulla riga sotto (+ a sinistra, invio a destra). */
.chat-form.multiline { align-items: flex-end; }
.chat-form.multiline textarea { flex-basis: 100%; order: 0; }

/* Il microfono resta SEMPRE a portata di mano, anche con testo scritto
   (feedback utente 16 lug): dopo una correzione a mano si deve poter
   riprendere la dettatura da dove si era — prima spariva e, corretta una
   sola parola, non si poteva più continuare a voce. */
.chat-form.has-text .comp-mic { display: inline-flex; }

/* Pulsanti tondi e piatti dentro la cornice */
.chat-form .comp-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink-soft); cursor: pointer; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-form .comp-btn:hover { background: var(--bg-deep); color: var(--accent-deep); }
.chat-form .comp-btn svg { width: 21px; height: 21px; }
.chat-form .comp-send { width: 38px; height: 38px; box-shadow: none; }
/* Il microfono in ascolto resta evidenziato anche dentro il composer. */
.chat-form .comp-mic.listening { background: var(--accent-deep); color: #fff; }

/* Assistente vocale rapido: barra semplice a riga singola (isolata dal
   composer principale della chat). */
.quick-form { display: flex; gap: 8px; align-items: center; }
.quick-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: var(--surface); color: var(--ink);
}
.quick-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }

.mic-btn, .send-btn {
  width: 45px; height: 45px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.mic-btn { background: var(--surface); border: 1px solid var(--line); color: var(--accent-deep); }
.mic-btn svg, .send-btn svg { width: 19px; height: 19px; }
.mic-btn.listening {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  animation: micPulse 1.2s infinite ease-in-out;
}
.mic-btn[disabled] { opacity: 0.35; cursor: not-allowed; animation: none; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151, 96, 111, 0.35); }
  50% { box-shadow: 0 0 0 9px rgba(151, 96, 111, 0); }
}
.send-btn { background: var(--accent-deep); color: #fff; }
/* Tasto invio → stop durante la generazione (doc barra input) */
.send-btn .ic-stop { display: none; }
.chat-form.generating .send-btn { background: var(--ink-soft); }
.chat-form.generating .send-btn .ic-send { display: none; }
.chat-form.generating .send-btn .ic-stop { display: inline-block; }

.disclaimer { font-size: 11px; color: var(--ink-soft); text-align: center; margin: 10px 0 0; line-height: 1.5; }

.conv-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.conv-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--surface);
  text-align: left;
}
.conv-item.active-conv { border-color: var(--accent); background: var(--accent-soft); }
.conv-item .c-main { flex: 1; min-width: 0; }
.conv-item .c-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .c-date { font-size: 11.5px; color: var(--ink-soft); }
.conv-item .c-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.conv-item .c-fav, .conv-item .c-del { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 6px; border-radius: 8px; }
.conv-item .c-fav svg, .conv-item .c-del svg { width: 16px; height: 16px; }
.conv-item .c-fav.fav-on { color: #C9A227; }
.conv-item .c-fav.fav-on svg { fill: #F6ECC8; }
.conv-item .c-del:hover { color: var(--danger); background: var(--bg-deep); }

/* ---------- FAMIGLIA ---------- */
.inline-form { margin-top: 12px; }
.inline-form label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  margin: 12px 0 6px;
}
.inline-form label .optional { font-weight: 500; color: var(--ink-soft); }
.inline-form input, .inline-form select, .inline-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  margin-top: 6px;
}
.inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus {
  outline: 2px solid var(--accent); border-color: transparent;
}
.inline-form textarea { resize: vertical; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.person-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.person-row:last-child { border-bottom: none; }
.person-row .p-name { font-weight: 600; font-size: 14.5px; }
.person-row .p-meta { color: var(--ink-soft); font-size: 12.5px; }
.person-row .p-actions { display: flex; gap: 10px; }
.person-row .p-actions button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 4px; }
.person-row .p-actions button svg { width: 16px; height: 16px; }

.contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.contact-row:last-of-type { border-bottom: none; }
.contact-row span { color: var(--ink-soft); }

.soon-card { background: var(--bg-deep); border-style: dashed; box-shadow: none; }

/* ---------- FAMIGLIA: persone, calendario, routine ---------- */
/* Dentro un singolo profilo: via titolo, sottotitolo e menu tab generali. */
#view-famiglia.profile-open > .page-title,
#view-famiglia.profile-open > .page-sub,
#view-famiglia.profile-open > #familyTabs { display: none; }
/* M4 · Agenda nell'edizione gestionale (Bozza A, scelta del presidente il
   23 ott): la sezione ha la sua testata e NON mostra la riga di linguette —
   la barra in basso dice già dove sei. Il filtro-persona è una riga di
   bottoncini, e il mese resta al centro anche senza la tendina «Tutti ⌄». */
#view-famiglia.gest-section > #familyTabs { display: none; }
#view-famiglia.gest-section .cal-nav-who { display: none; }
#view-famiglia.gest-section .cal-nav .cal-month { grid-column: 2; }
#view-famiglia.gest-section .cal-nav-search { grid-column: 3; }
#calWhoChips { margin-top: 2px; }
/* Sopratitolo della sezione (testi del presidente): maiuscoletto discreto,
   sopra il sottotitolo. Il titolo vero sta nella testata. */
.page-kicker {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 3px;
}

/* M4 · LE LISTE (gestionale, Bozza A). La pagina mostra cosa c'è dentro ogni
   lista: due righe per ciascuna, e si entra toccando. Dentro una lista la
   testata della sezione tace e resta il chevron col nome della lista. */
#view-famiglia.gest-in-list > .page-kicker,
#view-famiglia.gest-in-list > .page-sub { display: none; }
/* Dentro una lista il nome lo dice il chevron: la testata interna della
   schermata (il titolone «Promemoria», la parola «Note» accanto al toggle)
   sarebbe la stessa ridondanza tolta dall'Agenda. Il toggle Note|Checklist,
   il menù ☰ e la ricerca restano: quelli servono. */
#view-famiglia.gest-inside .section-head,
#view-famiglia.gest-inside #noteHome .note-head .page-title { display: none; }
/* E il tondo «+» in basso a destra se ne va anche qui (risposta 3 del
   presidente, 23 ott): dentro una lista si aggiunge dal cerchio della barra,
   che scrive direttamente in quella lista. */
#view-famiglia.gest-inside .fab { display: none; }
/* I suggerimenti delle prime volte: si confermano con un tocco. */
.gl-sugg { cursor: pointer; color: var(--ink-soft); }
.gl-sugg:hover { color: var(--ink); }
.gl-sugg-plus {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-sugg-plus svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; }
/* M4 · decisione G: «chi se ne occupa» sulla riga della routine. */
.routine-who {
  margin-left: auto; margin-right: 8px; max-width: 42%;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-deep);
  color: var(--ink-soft); font-family: 'Inter', sans-serif; font-size: 12px;
  padding: 4px 8px;
}
/* M4 · «Da tenere a mente»: una voce sola, toccabile. */
.hold-card { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.hold-card:hover { border-color: var(--accent); }
.hold-line { margin: 0 0 6px; font-size: 14px; }
.hold-foot { margin: 0; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
/* La visita (decisioni B·C·D): le tre domande e la risposta sotto. */
.vis-q-head {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); margin: 14px 0 6px;
}
.vis-q { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vis-q .vis-q-ans { font-size: 13px; color: var(--ink-soft); margin-left: 14px; }
#gestPrimeChips { margin-bottom: 12px; }
#gestPrimeSuggest { margin-top: 14px; }
.gest-sub-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.gest-sub-title { font-size: 17px; font-weight: 600; margin: 0; }
#gestWhoChips { margin-top: 2px; margin-bottom: 12px; }
.gl-card { padding: 14px 16px; cursor: pointer; transition: border-color .15s ease; }
.gl-card:hover { border-color: var(--accent); }
.gl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gl-name { font-size: 15.5px; font-weight: 600; }
.gl-count {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--accent-deep); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 9px;
}
.gl-go { width: 17px; height: 17px; margin-left: auto; flex: 0 0 auto;
  fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.gl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.gl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-box {
  width: 18px; height: 18px; flex: 0 0 auto; padding: 0; cursor: pointer;
  border: 1.6px solid var(--line); border-radius: 6px; background: var(--surface);
}
.gl-box:hover { border-color: var(--accent); }
.gl-box.done { background: var(--accent); border-color: var(--accent); position: relative; }
.gl-box.done::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.gl-box.done + .gl-text { color: var(--ink-soft); text-decoration: line-through; }
.gl-tag {
  flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); background: var(--bg-deep); border-radius: 999px; padding: 2px 8px;
}
.gl-tag.p-high { color: var(--accent-deep); background: var(--accent-soft); }
.gl-tag.rep { color: var(--violet-deep); background: var(--violet-soft); }
/* «Aggiungi al volo» (ritocco ② del presidente): dentro la card della Spesa e
   in fondo alla lista aperta. Una cosa che viene in mente si scrive e basta. */
.gl-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gl-add input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-deep); color: var(--ink); padding: 9px 14px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
}
.gl-add input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.gl-add-btn {
  width: 32px; height: 32px; flex: 0 0 auto; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-add-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.gl-del { width: 28px; height: 28px; flex: 0 0 auto; }
.gl-del svg { width: 15px; height: 15px; }
.person-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.person-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; margin-bottom: 0;
  transition: border-color 0.15s ease;
}
.person-card:hover { border-color: var(--accent); }
.person-card .p-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.person-card .p-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-soft);
}
.person-card .p-avatar-empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-deep);
  color: var(--ink-soft);
  border: none;
}
.person-card .p-avatar-empty svg { width: 20px; height: 20px; }
.person-card .p-name { font-weight: 600; font-size: 15px; }
.person-card .p-meta { font-size: 12px; color: var(--ink-soft); }
.person-card .p-actions { display: flex; align-items: center; gap: 10px; }
.person-card .p-chevron { width: 16px; height: 16px; color: var(--ink-soft); }
.person-card .pc-del, .person-card .pc-cal, .person-card .pc-menu { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; }
.person-card .pc-del svg, .person-card .pc-cal svg, .person-card .pc-menu svg { width: 15px; height: 15px; }
.person-card .pc-cal { color: var(--accent-deep); }
.person-card .pc-menu svg { width: 18px; height: 18px; }
.person-card .pc-menu:hover { color: var(--accent-deep); }

/* SRD-03: sezioni profili archiviati / eliminati ripristinabili */
.archived-section { margin-top: 18px; }
.archived-title { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; font-family: inherit; font-weight: 600; }
.person-card.archived-card { opacity: 0.85; }
.person-card.archived-card .p-avatar-empty svg { color: var(--ink-soft); }
.pc-restore {
  background: var(--accent-soft); color: var(--accent-deep);
  border: none; border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pc-restore:hover { background: var(--accent); }

.back-btn { display: inline-block; margin-bottom: 8px; }
.person-title { font-size: 22px; margin: 0 0 8px; }

/* Emergenze: consultazione rapida, testo grande e leggibile */
.tab-btn.danger-tab { color: var(--danger); border-color: #E4C3C3; }
.tab-btn.danger-tab.active { background: var(--danger); color: #fff; border-color: var(--danger); }
.emergency-card { border-left: 4px solid var(--danger); }
.emergency-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.emergency-row:last-child { border-bottom: none; }
.emergency-row span { font-size: 12px; color: var(--ink-soft); flex-shrink: 0; }
.emergency-row strong { font-size: 15px; text-align: right; }

.child-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 2px solid var(--accent-soft);
}
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.dash-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.dash-item span { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
.dash-item strong { font-size: 14.5px; }

.growth-svg { width: 100%; height: 80px; margin-bottom: 6px; }
.growth-svg polyline { fill: none; stroke: var(--accent-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Griglia a 3 colonne: "Tutti" a sinistra, mese SEMPRE al centro, lente a
   destra — il mese resta centrato comunque cambino le larghezze ai lati. */
.cal-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-nav .cal-month { justify-self: center; text-align: center; margin: 0; text-transform: capitalize; font-size: 17px; }
.cal-nav-who { justify-self: start; display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 600; }
.cal-nav-search { justify-self: end; }
.cal-nav-who svg, .cal-nav-search svg { fill: none; stroke: currentColor; }
.cal-nav-who .ct-caret { width: 12px; height: 12px; stroke-width: 2; transform: rotate(90deg); }
.cal-arrow[hidden] { display: none; }
.cal-nav .today-pill {
  border: 1px solid var(--accent); border-radius: 999px; background: transparent;
  color: var(--accent-deep); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 5px 13px; cursor: pointer; flex: 0 0 auto;
}
.cal-nav .today-pill:hover { background: var(--accent-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.cal-day {
  position: relative;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 7px 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.cal-day .cal-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.cal-day:hover { border-color: var(--line); }
.cal-day.weekend { color: var(--accent-deep); }
.cal-day.today .cal-num { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-deep); font-weight: 700; }
.cal-day.selected { background: var(--accent-soft); border-color: var(--accent); }
.cal-day.selected.today .cal-num { box-shadow: none; }
.cal-day .cal-dots {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px;
}
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-deep); }

/* Colori per tipo di evento (calendario + legenda + card promemoria) */
.ev-appuntamento { --ev: var(--violet); }
.ev-promemoria   { --ev: #C7943F; }
.ev-vaccino      { --ev: #5E8F6E; }
.ev-compleanno   { --ev: #C77E93; }
.ev-evento       { --ev: #6E86B0; }

/* Riga elemento del Calendario PULITA (come le card della Home, non dentro un
   riquadro): barretta colore · orario · titolo troncato + meta discreta ·
   azioni SOLO nel menu ⋮ (niente icone che coprono il testo). */
.event-row.cal-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 2px; margin: 0; border: none; background: transparent; border-radius: 0; overflow: visible; border-bottom: 1px solid var(--line); }
.event-row.cal-row:last-child { border-bottom: none; }
.event-row.cal-row .cr-bar { flex: 0 0 auto; width: 3px; align-self: stretch; min-height: 30px; border-radius: 2px; background: var(--ev, var(--accent)); }
.event-row.cal-row .cr-time { flex: 0 0 auto; width: 46px; font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.event-row.cal-row .cr-main { flex: 1; min-width: 0; }
.event-row.cal-row .cr-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row.cal-row .cr-meta { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row.cal-row .cr-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.event-row.cal-row .cr-menu { width: 30px; height: 30px; color: var(--ink-soft); }
.event-row.cal-row .cr-menu svg { width: 17px; height: 17px; }
.event-row.cal-row .cr-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: transparent; cursor: pointer; flex: 0 0 auto; }
.event-row.cal-row .cr-check:hover { border-color: var(--accent); }
.event-row.cal-row.er-clickable { cursor: pointer; }
.event-row.cal-row.er-clickable:hover .cr-title { color: var(--accent-deep); }
.cal-dot.ev-appuntamento, .legend-dot.ev-appuntamento, .dgh-dot.ev-appuntamento { background: var(--violet); }
.cal-dot.ev-promemoria, .legend-dot.ev-promemoria, .dgh-dot.ev-promemoria { background: #C7943F; }
.cal-dot.ev-vaccino, .legend-dot.ev-vaccino, .dgh-dot.ev-vaccino { background: #5E8F6E; }
.cal-dot.ev-compleanno, .legend-dot.ev-compleanno, .dgh-dot.ev-compleanno { background: #C77E93; }
.cal-dot.ev-evento, .legend-dot.ev-evento, .dgh-dot.ev-evento { background: #6E86B0; }

/* Legenda */
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Pannello del giorno: intestazione + toggle Giorno/Agenda */
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.day-head .card-title { margin: 0; text-transform: capitalize; }
.seg-toggle { display: inline-flex; background: var(--bg-deep); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
.seg-btn {
  border: none; background: transparent; border-radius: 999px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  padding: 6px 14px;
}
.seg-btn.active { background: var(--accent); color: #fff; }

/* Selettore Evento/Promemoria in cima al form di aggiunta (stile Samsung):
   a tutta larghezza, i due tasti in parti uguali. */
.cal-type-toggle { display: flex; width: 100%; margin: 0 0 14px; }
.cal-type-toggle .seg-btn { flex: 1; text-align: center; padding: 9px 14px; font-size: 14px; }
.cal-type-toggle.locked { opacity: 0.55; }
.cal-type-toggle.locked .seg-btn { cursor: default; }
/* Riga interruttore ("Tutto il giorno"): etichetta a sinistra, spunta a destra. */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-row input[type="checkbox"] { flex: 0 0 auto; }  /* forma e bersaglio: regola centrale in fondo al file */

/* Intestazione di gruppo nel giorno (APPUNTAMENTI, VACCINI, …) */
.day-group-head { display: flex; align-items: center; gap: 7px; margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); }
.day-group-head:first-child { margin-top: 0; }
.dgh-dot { width: 8px; height: 8px; border-radius: 50%; }
.agenda-day { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--accent-deep); text-transform: capitalize; }
.agenda-day:first-child { margin-top: 0; }

/* Riga evento ricca */
.event-row {
  position: relative; display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px 11px 16px; margin-bottom: 8px; overflow: hidden;
}
.event-row .er-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ev, var(--accent)); }
.event-row .er-time { flex: 0 0 auto; width: 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.event-row .er-hour { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.event-row .er-bell { width: 15px; height: 15px; color: var(--ink-soft); fill: none; stroke: currentColor; stroke-width: 1.7; }
.event-row .er-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; cursor: pointer;
}
.event-row .er-check:hover { border-color: var(--accent); }
.event-row .er-badge.prio-alta { background: #F6E2E2; color: var(--danger); }
.event-row .er-badge.prio-media { background: #F5EAD6; color: #97701F; }
.event-row .er-badge.prio-bassa { background: #E6ECF6; color: #4C689B; }
.event-row .er-main { flex: 1; min-width: 0; }
.event-row.er-clickable { cursor: pointer; }
.event-row.er-clickable:hover .er-title { color: var(--accent-deep); }
.event-row .er-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.event-row .er-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.event-row .er-avatar { width: 30px; height: 30px; }
.event-row .er-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
  background: color-mix(in srgb, var(--ev, var(--accent)) 16%, transparent);
  color: var(--ev, var(--accent-deep));
}
.event-row .er-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.event-row .er-actions .icon-btn { width: 30px; height: 30px; color: var(--ink-soft); }
.event-row .er-actions .icon-btn svg { width: 16px; height: 16px; }
.event-row .er-share.on { color: var(--accent-deep); }

/* Nuovo Memory Object */
.capture-menu { display: flex; flex-direction: column; gap: 8px; }
.capture-menu .soon { opacity: 0.5; }

/* Floating Action Button (Ricordi) */
.fab {
  position: fixed;
  right: calc(50% - 240px + 20px);
  bottom: 84px;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--accent-deep);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(151, 96, 111, 0.4);
  z-index: 20;
}
.fab svg { width: 22px; height: 22px; }
@media (max-width: 500px) {
  .fab { right: 18px; }
}

/* Rubrica per categorie */
.contact-group-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 4px;
}
.contact-group-title:first-child { margin-top: 4px; }
.contact-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:last-child { border-bottom: none; }
.contact-item .c-info { flex: 1; min-width: 0; }
.contact-item .c-name { font-weight: 600; font-size: 14px; }
.contact-item .c-meta { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-item .c-quick { display: flex; gap: 6px; flex-shrink: 0; }
.contact-item .c-act {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent-deep);
  cursor: pointer;
  text-decoration: none;
  font-size: 11px; font-weight: 700;
}
.contact-item .c-act svg { width: 14px; height: 14px; }
.contact-item .c-edit, .contact-item .c-del { color: var(--ink-soft); }

/* Foto in chat */
.chat-image-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.chat-image-chip img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }
.chat-image-chip span { flex: 1; }
.chat-image-chip button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; }
.chat-image-chip button svg { width: 14px; height: 14px; }
.bubble-image { width: 100%; max-width: 220px; border-radius: 10px; display: block; margin-bottom: 6px; }

/* Anteprima di più allegati sopra la barra (doc barra input) */
.chat-attach-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.attach-chip {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.attach-chip img { width: 52px; height: 52px; object-fit: cover; display: block; }
.attach-chip.file {
  display: flex; align-items: center; gap: 8px; padding: 8px 26px 8px 10px;
  max-width: 200px; font-size: 12.5px; color: var(--ink);
}
.attach-chip.file .attach-ico { width: 18px; height: 18px; color: var(--accent-deep); flex: 0 0 auto; }
.attach-chip.file .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .attach-x {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(58,50,60,0.55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.attach-chip .attach-x svg { width: 12px; height: 12px; }

/* Collegamenti tra viste dei Ricordi */
.memory-links-row { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.memory-links-row:empty { display: none; }

/* ---------- CONSIGLI ---------- */
.advice-list { display: flex; flex-direction: column; gap: 12px; }

.advice-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.advice-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.advice-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.advice-details { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.advice-details dt { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 8px; letter-spacing: 0.02em; }
.advice-details dd { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 2px 0 0; }
.advice-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.advice-actions .btn-ghost { padding: 8px 16px; font-size: 12.5px; }

.tips-transparency { font-size: 11.5px; color: var(--ink-soft); margin: -6px 0 16px; line-height: 1.5; }

.guide-body { font-size: 13.5px; color: var(--ink); line-height: 1.6; white-space: pre-wrap; margin: 8px 0 0; }

.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.check-item:last-child { border-bottom: none; }
.check-item input { flex-shrink: 0; }  /* forma e bersaglio: regola centrale in fondo al file */
.check-item.done span { text-decoration: line-through; color: var(--ink-soft); }

.check-item .todo-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.check-item .todo-date { font-size: 11.5px; color: var(--ink-soft); text-decoration: none; }
.check-item.done .todo-date { text-decoration: none; }
.check-item .todo-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; flex-shrink: 0; }
.check-item .todo-del svg { width: 15px; height: 15px; }
.check-item .todo-menu { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; flex-shrink: 0; }
.check-item .todo-menu svg { width: 17px; height: 17px; }
/* Assegnatario + scadenza per singola casella */
.check-item .ci-text { min-width: 0; }
.check-item .ci-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.check-item .ci-meta:empty { display: none; }
.check-item .ci-chip { font-size: 11px; color: var(--ink-soft); background: var(--bg-deep); border-radius: 999px; padding: 1px 8px; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; white-space: nowrap; }
.check-item .ci-chip.ci-overdue { color: var(--danger); background: rgba(199, 90, 78, 0.14); font-weight: 600; }
.check-item.done .ci-meta, .check-item.done .ci-chip { text-decoration: none; color: var(--ink-soft); }
.check-item .ci-assign { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; flex-shrink: 0; }
.check-item .ci-assign svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }

/* ---------- PULSANTE SERENA (SRD-09): orb centrale con stati ---------- */
.nav-btn-center {
  position: relative;
  margin-top: -22px;
}
.bottom-nav .nav-btn-center svg {
  width: 52px; height: 52px;
  padding: 13px;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent-deep), var(--accent));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.bottom-nav .nav-btn-center:active svg { transform: scale(0.94); }
/* Aura nei toni del pulsante quando Serena è ATTIVA (ti ascolta o ti risponde).
   Non compare durante l'ascolto passivo della parola "Serena": solo quando la
   stai usando davvero. È un alone morbido attorno al pulsante, non un puntino. */
.bottom-nav .nav-btn-center.serena-listening svg,
.bottom-nav .nav-btn-center.serena-thinking svg,
.bottom-nav .nav-btn-center.serena-speaking svg {
  animation: serenaAura 1.7s ease-in-out infinite;
}
@keyframes serenaAura {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 6px 2px rgba(180, 131, 143, 0.35); }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 24px 9px rgba(180, 131, 143, 0.6); }
}
.nav-btn-center.serena-attention::after {
  content: '';
  position: absolute;
  top: -2px; right: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C94F4F;
  border: 2px solid var(--surface);
}

/* ---------- SERENA QUICK ASSISTANT (SRD-09): tendina sovrapposta ---------- */
/* Tendina: fondale a tutto schermo, si chiude anche toccando fuori dalla card. */
.quick-sheet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(58, 50, 60, 0.28);
  z-index: 90;
}
.quick-sheet-card {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  animation: sheetUp 0.25s ease;
}
@keyframes sheetUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.quick-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.quick-sheet-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; margin: 0; }
.quick-sheet-ctx { font-size: 11.5px; color: var(--ink-soft); margin: 2px 0 0; }
.quick-sheet-actions { display: flex; align-items: center; gap: 8px; }
/* Audio del Quick Assistant: acceso = accento pieno, spento = barrato e attenuato */
#quickAudioBtn.audio-on { color: var(--accent-deep); }
#quickAudioBtn.audio-off { opacity: 0.45; position: relative; }
#quickAudioBtn.audio-off::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  border-top: 2px solid currentColor;
  transform: rotate(-35deg);
}
.quick-msgs { max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.quick-msgs .bubble { max-width: 88%; }
.quick-msgs:empty { display: none; }

/* ---------- CARD "DA SAPERE" (SRD-10) ---------- */
.ds-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  margin-bottom: 7px;
  cursor: pointer;
  width: 100%;
  border-top: none; border-right: none; border-bottom: none;
  text-align: left;
  font-family: inherit;
}
.ds-icon { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.ds-title { font-size: 13.5px; font-weight: 700; margin: 0; color: var(--ink); }
.ds-desc { font-size: 12.5px; color: var(--ink-soft); margin: 1px 0 0; line-height: 1.4; }
.ds-red { border-left-color: #C94F4F; }
.ds-orange { border-left-color: #D98E3B; }
.ds-blue { border-left-color: #5B7FA6; }
.ds-green { border-left-color: #6C9A62; }
.ds-gray { border-left-color: var(--ink-soft); }

.essentials-member { margin-bottom: 16px; }
.essentials-member h3 { font-size: 15px; margin: 0 0 6px; font-family: 'Playfair Display', serif; }
.essentials-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.essentials-row span { color: var(--ink-soft); flex-shrink: 0; }
.essentials-row strong { text-align: right; font-weight: 600; }

/* Informazioni Essenziali: accordion, una card per persona */
.he-acc { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: var(--surface); overflow: hidden; }
.he-acc.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.he-acc-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.he-acc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.he-acc-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.he-acc-sum { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-acc-role { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--bg-deep); border-radius: 999px; padding: 3px 10px; }
.he-acc-chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-soft); transition: transform .2s ease; }
.he-acc.open .he-acc-chev { transform: rotate(90deg); }
.he-acc-body { padding: 4px 16px 16px; }
.he-ctx-head { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.he-lock { font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--bg-deep); border-radius: 999px; padding: 2px 8px; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .he-acc-chev { transition: none; } }

/* Checklist collegate (Aggiornamento SRD) */
.digest-cl-btn { display: block; padding: 2px 0 8px 14px; font-size: 12.5px; }
.cl-highlight { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.cl-link { margin: 2px 0 0; }
.cl-progress { margin: 2px 0 6px; font-weight: 600; }
.cl-addform { margin-top: 8px; }
.r-checklist { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.r-checklist .link-btn { font-size: 12px; padding: 0; }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}
.nav-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.nav-btn svg { width: 21px; height: 21px; }
.nav-btn small { font-size: 10px; font-weight: 600; }
.nav-btn.active { color: var(--accent-deep); }

/* ---------- OVERLAYS ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(58, 50, 60, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  z-index: 100;
}
.overlay-card {
  background: var(--surface);
  border-radius: 22px;
  padding: 26px 22px;
  max-width: 420px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 60px rgba(58, 50, 60, 0.28);
}
.overlay-card-left { text-align: left; }
.overlay-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.overlay-close svg { width: 15px; height: 15px; }
.overlay-title { font-size: 21px; margin: 0 0 8px; }
.overlay-text { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 16px; line-height: 1.55; }
.overlay-text.left { text-align: left; }

/* SRD-03: action sheet (menu contestuale + dialogo di eliminazione protetto) */
/* z-index alto: deve stare SOPRA gli editor a schermo intero (.note-editor z520,
   .cal-editor z500), altrimenti un ⋮ aperto da dentro l'editor resta invisibile. */
.action-sheet-overlay { align-items: flex-end; justify-content: center; padding: 0; z-index: 1000; }
.action-sheet {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(58, 50, 60, 0.18);
  animation: sheetUp 0.22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.action-sheet-title { font-size: 16px; margin: 2px 4px 12px; }
.action-sheet-note {
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.55;
  margin: 0 4px 12px; text-align: left;
}
.action-sheet-divider { height: 1px; background: var(--line); margin: 8px 4px; }
.action-sheet-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 13px 12px; border-radius: var(--radius-sm);
  font-size: 15px; color: var(--ink); font-weight: 500;
}
.action-sheet-item svg { width: 19px; height: 19px; color: var(--ink-soft); flex-shrink: 0; }
.action-sheet-item:hover { background: var(--bg); }
.action-sheet-item.primary { background: var(--accent-soft); color: var(--accent-deep); }
.action-sheet-item.primary svg { color: var(--accent-deep); }
.action-sheet-item.danger { color: var(--danger); }
.action-sheet-item.danger svg { color: var(--danger); }

/* Toast di conferma azioni */
.serena-toast {
  position: fixed; left: 50%; bottom: 90px;
  /* `width: max-content` — difetto vecchio, misurato il 28 lug: con `left: 50%`
     il browser dimensiona un elemento fisso sulla sola METÀ DESTRA dello schermo
     (187,5px a 375), non sulla larghezza vera. Ogni toast andava a capo molto
     prima del necessario — «Condiviso con la famiglia.» occupava due righe e 54px
     d'altezza invece di una e 38 — mentre il tetto dell'88% (330px) restava
     inutilizzato. Il centraggio resta al transform, il tetto continua a valere
     per i messaggi lunghi: cambia solo che il toast usa lo spazio che ha. */
  width: max-content;
  transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; max-width: 88%; text-align: center;
  box-shadow: 0 8px 24px rgba(58, 50, 60, 0.3);
  opacity: 0; pointer-events: none; z-index: 1010;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.serena-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Toast con azione (infrastruttura, non solo Home): il testo resta a sinistra e
   il pulsante è l'unica cosa toccabile — il resto del toast non intercetta il
   dito. §10: area di tocco 44px in verticale con uno pseudo-elemento, senza
   gonfiare la pastiglia. Il rosa chiaro su fondo scuro tiene il contrasto. */
/* `width: max-content` NON è una rifinitura: con `left: 50%` lo spazio che il
   browser usa per dimensionare un elemento fisso è solo la metà destra dello
   schermo (187,5px a 375), e il testo andava a capo accanto al pulsante lasciando
   il toast alto 54px invece di 38. Il centraggio resta al transform; il tetto
   dell'88% continua a valere per i messaggi lunghi. Misurato, non scelto. */
.serena-toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; text-align: left; width: max-content; }
.serena-toast .toast-action {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: var(--accent-soft);
  cursor: pointer; white-space: nowrap; position: relative; flex: none;
}
.serena-toast .toast-action::after { content: ''; position: absolute; left: -10px; right: -10px; top: -15px; bottom: -15px; }
.serena-toast .toast-action:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }

/* SOS */
.sos-breath { width: 110px; height: 110px; margin: 10px auto; display: flex; align-items: center; justify-content: center; }
.sos-breath-circle {
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-soft), var(--accent));
  animation: sosBreath 6s ease-in-out infinite;
}
@keyframes sosBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
.sos-breath-word { font-weight: 700; margin: 0 0 18px; font-size: 14px; }

.sos-steps { text-align: left; background: var(--bg); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 18px; }
.sos-steps p { font-size: 13.5px; margin: 6px 0; line-height: 1.45; }

.sos-help-info { text-align: left; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; }
.sos-help-info p { font-size: 13px; line-height: 1.55; margin: 6px 0; }

/* Centro Sicurezza e Benessere (SRD-05) */
.sos-choice-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s ease;
}
.sos-choice-btn:hover { border-color: var(--accent); }
.sos-choice-btn svg { width: 26px; height: 26px; color: var(--accent-deep); flex-shrink: 0; }
.sos-choice-btn.medical svg { color: var(--danger); }
.sos-choice-btn span { display: flex; flex-direction: column; gap: 2px; }
.sos-choice-btn strong { font-size: 14.5px; color: var(--ink); }
.sos-choice-btn small { font-size: 12px; color: var(--ink-soft); }

.sos-members { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.sos-member-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}
.sos-member-row .p-avatar { width: 40px; height: 40px; }
.sos-member-row .sm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sos-member-row strong { font-size: 14px; color: var(--ink); }
.sos-member-row small { font-size: 11.5px; color: var(--ink-soft); }
.sos-member-row .sm-state {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 4px 10px;
  background: var(--accent-soft); color: var(--danger);
}
.sos-member-row .sm-state.ok { background: var(--violet-soft); color: var(--violet); }

.sos-member-body { text-align: left; }
.sos-member-body .sos-contact-btn { margin-bottom: 8px; text-align: center; }
#sosMedical .sos-contact-btn { margin: 10px 0 4px; text-align: center; }
#sosOverlay .back-btn { display: block; text-align: left; margin-bottom: 6px; }

.sos-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sos-contact-btn {
  display: block;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}
.sos-contact-btn.emergency {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.contact-actions { display: inline-flex; align-items: center; gap: 10px; }
.contact-phone { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.contact-actions button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; }
.contact-actions button svg { width: 15px; height: 15px; }

/* Foto */
.photo-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px;
}
.photo-btn svg { width: 17px; height: 17px; }
.photo-preview img { width: 100%; border-radius: var(--radius-sm); margin-top: 10px; }

/* Link prodotto (Consigli) */
.link-manage { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.link-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.link-edit-row input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.link-edit-row input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.link-edit-row .btn-ghost { padding: 8px 16px; font-size: 12.5px; flex-shrink: 0; }
.link-note { font-size: 11px; color: var(--ink-soft); margin: 8px 0 0; }

/* Impostazioni */
.settings-section {
  font-size: 15px; font-weight: 600; margin: 20px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
/* Impostazioni a tendine: una <details> per argomento, chiusa di default,
   stessa grafica delle sezioni espandibili dell'app (Salute, Gravidanza…). */
.settings-acc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
}
.settings-acc summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600;
  color: var(--ink); padding: 13px 14px;
}
.settings-acc summary::-webkit-details-marker { display: none; }
.settings-acc summary:hover { color: var(--accent-deep); }
.settings-acc[open] > summary .acc-arrow { transform: rotate(90deg); }
.settings-acc .settings-acc-body { padding: 0 14px 12px; }
/* Sottotitolo dentro una tendina (es. i consensi dati dentro Privacy e Sicurezza) */
.settings-subsection {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  cursor: pointer;
}
.toggle-row input { flex-shrink: 0; }  /* forma e bersaglio: regola centrale in fondo al file */

/* Pannello amministrativo catalogo */
.overlay-wide { max-width: 460px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-actions .btn-primary, .admin-actions .btn-ghost { padding: 9px 16px; font-size: 13px; }
.admin-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-filters select {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface);
}
.admin-row.suspended { opacity: 0.55; }
.admin-row .a-main { flex: 1; min-width: 0; }
.admin-row .a-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row .a-meta { font-size: 11.5px; color: var(--ink-soft); }
.score-chip {
  background: var(--violet-soft); color: var(--violet);
  font-weight: 700; font-size: 11.5px;
  border-radius: 999px; padding: 4px 9px; flex-shrink: 0;
}
.admin-row .a-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-row .a-actions button { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 3px; }
.admin-row .a-actions button svg { width: 16px; height: 16px; }
.admin-kpi { display: flex; gap: 10px; }
.admin-log { max-height: 160px; overflow-y: auto; }
.admin-log p { font-size: 12px; color: var(--ink-soft); margin: 5px 0; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.toggle-row.plain { font-weight: 600; font-size: 13px; margin-top: 12px; }
.pf-link-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
}
.pf-link-row input[type="text"], .pf-link-row input[type="url"] { margin-top: 0; }
.pf-link-row .pf-link-aff { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; grid-column: 1; }
.pf-link-row .pf-link-remove { background: none; border: none; color: var(--ink-soft); cursor: pointer; }
.pf-link-row .pf-link-remove svg { width: 15px; height: 15px; }
.advice-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.advice-brand { font-size: 12px; color: var(--ink-soft); }
.advice-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.advice-links .btn-ghost { padding: 8px 16px; font-size: 12.5px; }
.affiliate-note { font-size: 11px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.45; }

/* Ricerca globale */
.search-results { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.sr-group { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 12px 0 4px; }
.sr-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}
.sr-item .sr-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.sr-item .sr-snippet { font-size: 12px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 360px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Accessibilità e cattura schermate: quando l'ambiente chiede meno movimento
   (utenti con sensibilità al moto o strumenti di screenshot automatici), le
   animazioni continue vengono congelate così la pagina raggiunge uno stato
   stabile. Non cambia nulla per l'uso normale. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== SRD Ricordi: Diario sfogliabile a libro (mockup) ===== */
/* Filtri a pillole con icona + chevron: 3 su una riga, senza scorrere */
.diary-controls { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: hidden; }
/* Pillola-filtro: tutta cliccabile (è un <button>). */
.diary-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; justify-content: center;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 8px 10px; cursor: pointer;
  font-family: inherit;
}
.diary-pill:hover { border-color: var(--accent); }
.diary-pill.open { border-color: var(--accent); background: var(--accent-soft); }
.diary-pill-ico { width: 14px; height: 14px; color: var(--accent-deep); flex: 0 0 auto; }
.diary-pill-chev { width: 11px; height: 11px; color: var(--ink-soft); flex: 0 0 auto; transform: rotate(90deg); transition: transform .15s ease; }
.diary-pill.open .diary-pill-chev { transform: rotate(-90deg); }
.diary-pill-label {
  font-size: 12px; font-weight: 600; color: var(--ink);
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Menu del dropdown, in stile Serena (posizionato fixed via JS). */
.diary-menu {
  position: fixed; z-index: 200;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.diary-menu-item {
  text-align: left; background: none; border: none; border-radius: 9px;
  padding: 9px 12px; font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.diary-menu-item:hover { background: var(--bg-deep); }
.diary-menu-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.diary-funnel {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent-deep); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.diary-funnel svg { width: 17px; height: 17px; }

/* Il quaderno */
.diary-book {
  position: relative;
  display: flex; gap: 4px;
  background: #FBF6EF;
  border: 1px solid #ECE0D0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(58,50,60,0.10), inset 0 0 40px rgba(151,96,111,0.04);
  padding: 22px 18px 68px 40px;
  overflow: hidden;
  cursor: grab;
}
.diary-book:active { cursor: grabbing; }
.diary-spiral {
  position: absolute; left: 8px; top: 16px; bottom: 16px; width: 20px;
  background-image: radial-gradient(ellipse 7px 4px at center, var(--accent) 0 40%, rgba(151,96,111,0.35) 41% 60%, transparent 62%);
  background-size: 20px 22px; background-repeat: repeat-y; background-position: center;
}
.diary-type-badge {
  position: absolute; top: 16px; right: 58px; z-index: 2;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  border-radius: 999px; padding: 4px 11px;
}
.diary-ribbon {
  position: absolute; top: -2px; right: 20px; z-index: 2;
  width: 34px; height: 54px; border: none; cursor: pointer;
  background: var(--accent-deep); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 9px;
}
.diary-ribbon svg { width: 17px; height: 17px; fill: none; }
.diary-ribbon.on svg { fill: #fff; }

.diary-page { flex: 1 1 50%; min-width: 0; padding: 4px 8px; }
.diary-dateblock { text-align: left; margin-bottom: 12px; }
.diary-weekday { display: block; font-size: 13px; font-weight: 600; color: var(--accent-deep); }
.diary-daynum { display: block; font-family: 'Playfair Display', serif; font-size: 42px; line-height: 1; color: var(--ink); }
.diary-monthyear { display: block; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.diary-photo-wrap { position: relative; width: fit-content; margin: 6px auto 12px; }
.diary-photo-wrap::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 62px; height: 20px; background: rgba(180,131,143,0.35); border-radius: 2px; z-index: 1;
}
.diary-photo { display: block; width: 100%; max-width: 200px; border-radius: 6px; border: 6px solid #fff; box-shadow: 0 5px 16px rgba(58,50,60,0.18); transform: rotate(-1.2deg); }
.diary-photo-empty {
  width: 170px; height: 170px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 6px solid #fff; border-radius: 6px; box-shadow: 0 5px 16px rgba(58,50,60,0.12); transform: rotate(-1.2deg);
}
.diary-photo-empty svg { width: 34px; height: 34px; color: var(--ink-soft); }
.diary-phrase {
  font-family: 'Caveat', cursive; font-size: 21px; line-height: 1.35; color: var(--ink); margin: 4px 0 0;
  background: linear-gradient(transparent 82%, var(--accent-soft) 82%); display: inline;
}
.diary-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.diary-hashtag { background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.diary-page-right { position: relative; }
.diary-quote { font-family: 'Playfair Display', serif; font-size: 46px; line-height: 0.6; color: var(--accent); display: block; height: 22px; }
.diary-body { font-family: 'Caveat', cursive; font-size: 19px; line-height: 1.45; color: #4a4048; white-space: pre-wrap; margin: 0; }

.diary-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 12px; }
/* Navigazione ancorata dentro il diario, in basso al centro. */
.diary-book .diary-nav { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; z-index: 2; }
.diary-nav button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--accent-deep); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.diary-nav button svg { width: 18px; height: 18px; }
.diary-nav button:disabled { opacity: 0.35; cursor: default; }
.diary-counter { font-size: 14px; color: var(--ink-soft); min-width: 60px; text-align: center; }

/* Barra azioni come card + menù "…" */
.diary-actions {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 6px; gap: 4px; align-items: center; justify-content: space-around;
  box-shadow: var(--shadow-sm); overflow: visible;
}
.diary-actions .m-more-wrap { position: relative; }
.diary-actions .m-more { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 6px; }
.diary-actions .m-more svg { width: 18px; height: 18px; }
.m-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(58,50,60,0.18); padding: 6px; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-more-menu button { width: 100%; justify-content: flex-start; background: none; border: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.m-more-menu button:hover { background: var(--bg); }
.m-more-menu button.danger { color: var(--danger); }

/* Striscia mensile */
.diary-strip-wrap { margin-top: 18px; }
.diary-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.diary-strip-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.diary-strip-month { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
.diary-strip-month svg { width: 15px; height: 15px; }
.diary-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.diary-thumb {
  position: relative; flex: 0 0 96px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.diary-thumb.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.diary-thumb-top { display: flex; align-items: baseline; justify-content: space-between; }
.diary-thumb-day { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--ink); }
.diary-thumb-wd { font-size: 10.5px; color: var(--ink-soft); }
.diary-thumb img { width: 100%; height: 62px; object-fit: cover; border-radius: 8px; }
.diary-thumb-noimg { width: 100%; height: 62px; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); border-radius: 8px; }
.diary-thumb-noimg svg { width: 20px; height: 20px; color: var(--ink-soft); }
.diary-thumb-heart { position: absolute; bottom: 6px; right: 6px; color: var(--accent-deep); }
.diary-thumb-heart svg { width: 15px; height: 15px; fill: var(--accent-soft); }

@media (max-width: 420px) {
  .diary-book { padding: 18px 12px 18px 34px; }
  .diary-page { padding: 4px 5px; }
  .diary-daynum { font-size: 34px; }
  .diary-phrase, .diary-body { font-size: 17px; }
  .diary-photo, .diary-photo-empty { max-width: 150px; }
  .diary-photo-empty { width: 130px; height: 130px; }
}

/* ===== Guida a Serena: card in Home + guida completa ===== */
.guide-tip {
  width: 100%; text-align: left; cursor: pointer;
  background: #FCF6F8; border: 1px solid #F3E7EC; border-radius: var(--radius-sm);
  padding: 14px; display: flex; align-items: center; gap: 12px;
}
.guide-tip-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.guide-tip-ico svg { width: 20px; height: 20px; }
.guide-tip-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-tip-section { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-deep); text-transform: uppercase; }
.guide-tip-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.guide-tip-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.guide-tip-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-deep); }

.guide-overlay-card { max-width: 560px; overflow-y: auto; }
.guide-section { margin-bottom: 18px; }
.guide-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.guide-section-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.guide-section-ico svg { width: 18px; height: 18px; }
.guide-section-head h3 { font-family: 'Playfair Display', serif; font-size: 19px; margin: 0; color: var(--ink); }
.guide-section-intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
.guide-items { display: flex; flex-direction: column; gap: 10px; }
.guide-item { border-left: 2px solid var(--line); padding-left: 12px; }
.guide-item-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.guide-item-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
/* La prima sezione (principi) è evidenziata. */
.guide-section-principi { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 14px; }
.guide-section-principi .guide-item { border-left-color: var(--accent); }
.guide-version { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 8px 0 0; }

/* ===== Chi è Serena ===== */
.about-card { max-width: 520px; overflow-y: auto; }
.about-hero { text-align: center; margin-bottom: 18px; }
.about-spark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-deep); color: #fff; margin-bottom: 10px;
}
.about-spark svg { width: 28px; height: 28px; }
.about-name { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--accent-deep); margin: 0; }
.about-tagline { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }
.about-section { margin-bottom: 16px; }
.about-section h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.about-section p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.about-list { margin: 0; padding-left: 18px; list-style: disc; }
.about-list li { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 7px; }
.about-list strong { color: var(--ink); }
.about-quote {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 15px; line-height: 1.5; color: var(--accent-deep);
  text-align: center; margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ===== ADS-03: figure di supporto e turni ===== */
.member-check-list { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.sh-times { display: flex; gap: 10px; }
.sh-times label { flex: 1; }
.sh-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sh-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.sh-item-when { font-size: 14px; font-weight: 600; color: var(--ink); }
.sh-item-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.sh-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 4px; }
.sh-del svg { width: 16px; height: 16px; }

/* Gestione profilo genitore dentro il fascicolo (archivia/elimina) */
.parent-manage { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }

/* Ricerche Online (Addendum SRD-014): sotto-opzioni indentate e dipendenti */
.toggle-row.srch-sub { padding-left: 16px; }
.toggle-row.srch-sub input:disabled + span, .toggle-row.srch-sub:has(input:disabled) { opacity: 0.5; }

/* ============================================================
   ARCHIVIO SANITARIO INTELLIGENTE — Famiglia, fascicolo, Home
   (mock luglio 2026: stessi colori dell'app, card morbide)
   ============================================================ */
:root {
  --good: #4E8A4E;
  --good-soft: #E9F4E7;
  --warn: #9A7B24;
  --warn-soft: #F7EFD8;
}

/* ---- Card persona (lista famiglia) ---- */
.person-card .p-avatar { width: 48px; height: 48px; }
.person-card .p-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-badge {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  padding: 2.5px 9px; border-radius: 999px;
  background: var(--violet-soft); color: #6D5A8A;
}
/* Tutela esplicita: i fascicoli in custodia lo dicono con dolcezza (tono
   caldo, non "di potere" come il badge Titolare). */
.p-badge.custody { background: var(--accent-soft); color: var(--accent-deep); font-weight: 500; }
.person-card .p-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.person-card.highlight { background: var(--accent-soft); border-color: #E8CBD5; }
.person-card.highlight .p-sub { color: var(--accent-deep); font-weight: 600; }

/* ---- Card-azione "Aggiungi..." ---- */
.person-add-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; color: var(--ink); box-shadow: var(--shadow-sm);
}
.person-add-card:hover { border-color: var(--accent); }
.pa-circle {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  border: 1.6px dashed var(--accent); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.pa-circle svg { width: 19px; height: 19px; }
.pa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-text strong { font-size: 14.5px; font-weight: 600; }
.pa-text small { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Card "Relazioni e permessi" ---- */
.relations-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; margin: 4px 0 12px; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; color: var(--ink);
}
.relations-card:hover { border-color: var(--accent); }
.rel-icon { color: var(--accent-deep); flex: 0 0 auto; }
.rel-icon svg { width: 24px; height: 24px; }
.relations-card .p-chevron { margin-left: auto; width: 16px; height: 16px; color: var(--ink-soft); flex: 0 0 auto; }
.relation-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.relation-row:last-child { border-bottom: none; }
.relation-row .rr-info { flex: 1; min-width: 0; }
.relation-row .rr-name { font-weight: 600; font-size: 14px; }
.relation-row .rr-role { font-size: 12px; color: var(--ink-soft); }
.relation-row .rr-access { font-size: 11.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.relation-row select { font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: var(--surface); color: var(--ink); }

/* ---- "Serena suggerisce" ---- */
.serena-suggests {
  background: var(--violet-soft); border: 1px solid #E2D9EE; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.ss-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #6D5A8A; margin-bottom: 10px; }
.ss-head svg { width: 16px; height: 16px; }
.ss-count { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.ss-new { margin-left: auto; font-size: 10.5px; font-weight: 600; background: var(--violet); color: #fff; padding: 2.5px 9px; border-radius: 999px; }
.ss-body { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ss-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
}
.ss-icon svg { width: 18px; height: 18px; }
.ss-text { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-actions .btn-primary, .ss-actions .btn-ghost { font-size: 13px; padding: 9px 14px; }
.ss-actions .btn-ghost { background: var(--surface); display: inline-flex; align-items: center; gap: 6px; }
.ss-clock { width: 14px; height: 14px; }
.ss-ignore { margin-top: 8px; font-size: 12.5px; }
.serena-suggests.compact { padding: 12px; margin-bottom: 10px; }
.serena-suggests.compact .ss-body { margin-bottom: 8px; }
.serena-suggests.compact .ss-icon { display: none; }
.serena-suggests.compact .ss-text { margin: 0; font-size: 13px; }
.serena-suggests.compact .ss-actions .btn-primary, .serena-suggests.compact .ss-actions .btn-ghost { font-size: 12px; padding: 7px 10px; }
.serena-suggests.compact .ss-ignore { margin-top: 6px; font-size: 11.5px; }

/* ---- Fascicolo membro: header ---- */
.member-hero { text-align: center; padding: 4px 0 12px; }
/* Doc Famiglia: nel profilo la foto sta a sinistra e TUTTO il testo (nome, età,
   stato "Sta bene", "Figlio di…", genitori) è in colonna a destra, allineato a
   sinistra. */
.member-hero .mh-head {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin-bottom: 10px;
}
.member-hero .mh-head .mh-avatar,
.member-hero .mh-head .mh-avatar-empty { flex: 0 0 auto; margin: 0; }
.member-hero .mh-body {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.member-hero .mh-body h2 { margin: 0; }
.member-hero .mh-body .mh-age { margin: 0; }
.member-hero .mh-body .mh-family { margin: 0; }
.member-hero .mh-body .mh-parents { margin: 2px 0 0; justify-content: flex-start; }
.member-hero .mh-avatar {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface); box-shadow: var(--shadow);
}
.member-hero .mh-avatar-empty {
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto;
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.member-hero .mh-avatar-empty svg { width: 40px; height: 40px; }
.member-hero h2 { font-size: 27px; font-weight: 600; margin: 10px 0 2px; }
.member-hero .mh-age { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; }
.mh-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: var(--good-soft); color: var(--good);
}
.mh-status svg { width: 14px; height: 14px; }
.mh-status.warn { background: var(--warn-soft); color: var(--warn); }
.mh-family { font-size: 13px; color: var(--ink-soft); margin: 10px 0 6px; }
.mh-parents { display: flex; justify-content: center; align-items: center; }
.mh-parents img, .mh-parents .mhp-empty, .mh-parents .mhp-add {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface); margin-left: -6px;
}
.mh-parents img:first-child, .mh-parents .mhp-empty:first-child { margin-left: 0; }
.mh-parents .mhp-empty { background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; }
.mh-parents .mhp-empty svg { width: 15px; height: 15px; }
.mh-parents .mhp-add { background: var(--surface); border: 1.4px dashed var(--line); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mh-parents .mhp-add svg { width: 14px; height: 14px; }

/* ---- Tab a pillole del fascicolo ---- */
.pill-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tabs .pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.pill-tabs .pill svg { width: 15px; height: 15px; }
.pill-tabs .pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-tabs .pill.danger { color: var(--danger); }

/* ---- Dashboard fascicolo: eventi, attività, timeline, profilo ---- */
.event-row, .activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
.row-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-deep);
}
.row-icon svg { width: 17px; height: 17px; }
.row-icon.violet { background: var(--violet-soft); color: var(--violet); }
.row-icon.green { background: var(--good-soft); color: var(--good); }
.row-icon.amber { background: var(--warn-soft); color: var(--warn); }
.event-row .er-body, .activity-row .ar-body { flex: 1; min-width: 0; }
/* AZIONI DELLA RIGA REFERTO (28 lug). La riga è .activity-row: le regole di
   .person-card/.person-row non la raggiungevano, quindi quei tre pulsanti erano
   NUDI — grigi, squadrati, disegnati dal browser, con bersaglio ~21px.
   Conferma e correggi diventano pastiglie tonde in tono col marchio. Il CESTINO
   NO, e non per timidezza: resta senza pastiglia, in colore di pericolo e
   STACCATO dagli altri due (12px contro 6), così la differenza si legge senza
   affidarsi al colore — forma e distanza — e chi tocca per sbaglio non trova
   un'azione irreversibile sotto il dito. §10: bersaglio 44×44 su tutti e tre,
   ottenuto col margine negativo che non alza la riga. */
.activity-row .p-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.activity-row .p-actions button {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; margin: -11px 0; padding: 0;
  border: none; background: none; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.activity-row .p-actions .pc-cal::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
}
.activity-row .p-actions button svg { width: 17px; height: 17px; position: relative; }
.activity-row .p-actions .pc-cal { color: var(--accent-deep); }
.activity-row .p-actions .doc-del { color: var(--danger); margin-left: 6px; }
.activity-row .p-actions button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -8px; border-radius: 50%; }

.er-title, .ar-title { font-size: 14px; font-weight: 600; }
.er-date, .ar-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-days { font-size: 11px; font-weight: 600; padding: 2.5px 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.chip-days.near { background: var(--good-soft); color: var(--good); }
.chip-state { font-size: 10.5px; font-weight: 600; padding: 2.5px 9px; border-radius: 999px; background: var(--good-soft); color: var(--good); }

.h-timeline { display: flex; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; }
.h-timeline::-webkit-scrollbar { display: none; }
.ht-node { flex: 1 0 25%; min-width: 82px; text-align: center; position: relative; }
.ht-node::before { content: ''; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.ht-node:first-child::before { display: none; }
.ht-circle {
  position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  margin: 0 auto 7px; display: flex; align-items: center; justify-content: center;
  background: var(--violet-soft); color: var(--violet); border: 2px solid var(--surface);
}
.ht-circle svg { width: 17px; height: 17px; }
.ht-node.rose .ht-circle { background: var(--accent-soft); color: var(--accent-deep); }
.ht-node.future .ht-circle { background: var(--surface); border: 1.6px dashed var(--line); color: var(--ink-soft); }
.ht-date { font-size: 11px; color: var(--ink-soft); }
.ht-label { font-size: 12px; font-weight: 600; line-height: 1.25; margin-top: 1px; }

.health-profile-card { cursor: pointer; }
.hp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hp-pct { font-size: 13px; font-weight: 700; color: var(--good); }
.hp-bar { height: 8px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.hp-fill { height: 100%; border-radius: 999px; background: var(--good); }
.hp-missing { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }

/* ---- Home: header con foto, digest a righe, griglia a 2 colonne ---- */
.home-hero { display: flex; align-items: flex-start; gap: 12px; }
.home-hero .hh-text { flex: 1; min-width: 0; }
.journey-row .jr-icon {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--violet-soft); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
}
.journey-row .jr-icon svg { width: 18px; height: 18px; }

.digest-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 2px; background: none; border: none; text-align: left;
  font-family: 'Inter', sans-serif; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.digest-item:last-of-type { border-bottom: none; }
.digest-item .di-body { flex: 1; min-width: 0; }
.digest-item .di-title { font-size: 14px; font-weight: 600; }
.digest-item .di-sub { font-size: 12.5px; color: var(--accent-deep); margin-top: 1px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.digest-item .di-sub .chip-state { flex: 0 0 auto; }
.digest-item .p-chevron { width: 15px; height: 15px; color: var(--ink-soft); flex: 0 0 auto; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.home-grid .card { min-width: 0; margin-bottom: 12px; }
.home-grid .card .card-title { font-size: 16.5px; }
@media (max-width: 380px) { .home-grid { grid-template-columns: 1fr; } }

.family-status .fs-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--good-soft); border-radius: var(--radius-sm); padding: 12px;
}
.family-status .fs-banner svg { width: 18px; height: 18px; color: var(--good); flex: 0 0 auto; margin-top: 1px; }
.family-status .fs-banner strong { font-size: 13.5px; color: var(--good); display: block; }
.family-status .fs-banner small { font-size: 12.5px; color: var(--ink); }
.family-status .fs-banner.warn { background: var(--warn-soft); }
.family-status .fs-banner.warn svg, .family-status .fs-banner.warn strong { color: var(--warn); }
.family-status .fs-banner.danger { background: #F6E3E3; }
.family-status .fs-banner.danger svg, .family-status .fs-banner.danger strong { color: var(--danger); }

/* FV0 (SRD-13) — Il filo dei controlli: i controlli consigliati futuri della
   famiglia, in ordine di data, ciascuno col referto-fonte. */
.control-thread { margin-top: 12px; }
.control-thread .ct-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.control-thread .ct-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft, #eee); }
.control-thread .ct-avatar { flex: 0 0 auto; }
.control-thread .ct-body { min-width: 0; flex: 1; }
.control-thread .ct-body strong { display: block; font-size: 13px; color: var(--ink); }
.control-thread .ct-body small { display: block; font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.control-thread .ct-plan { flex: 0 0 auto; font-size: 12px; padding: 6px 10px; }
.control-thread .ct-done { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); }
.control-thread .ct-more { font-size: 11.5px; color: var(--ink-soft); margin: 6px 0 0; }
.todo-origin { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-deep); margin-left: 6px; }

/* Journey con icone + chip di stato "warn" + aiuto stato famiglia */
.journey-row { display: flex; gap: 10px; align-items: center; }
.journey-row .jr-body { min-width: 0; }
/* Card Journey senza figli: due metà cliccabili — Benessere (check-in di
   oggi) e Note personali. Stessa resa delle righe fase/tappa. */
.journey-alt { display: flex; gap: 12px; }
.journey-alt .ja-half { cursor: pointer; }
.journey-alt .ja-half:hover { border-color: var(--violet); }
.journey-alt .jr-body strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-state.warn-chip { background: var(--warn-soft); color: var(--warn); }
#familyStatusCard .card-head .icon-btn { cursor: help; }
.digest-item .di-cl { font-size: 12px; margin-top: 2px; }

/* "Oggi con Serena": titolo sopra e righe sotto (supera il layout a contatori) */
#todaySummaryCard { display: block; padding: 14px 16px; }
#todaySummaryCard .card-title { font-size: 17px; margin: 0 0 4px; flex-shrink: 1; }

/* Chip di ruolo per le figure di supporto (nessun dato medico personale) */
.mh-status.violet { background: var(--violet-soft); color: #6D5A8A; }

/* ---- Home compatta: meno aria, niente scroll interni ---- */
#view-oggi .card { padding: 13px 14px; margin-bottom: 10px; }
#view-oggi .greeting { margin: 2px 0 8px; }
#view-oggi .header-age { margin: 0 0 4px; }
#view-oggi .header-motto { margin: 0 0 10px; }
#view-oggi .quick-actions { margin-bottom: 10px; gap: 8px; }
#view-oggi .card-title { margin: 0 0 8px; }
#view-oggi .next-reminders.scroll-quiet { max-height: 190px; }
#view-oggi .journey-card { padding: 12px 14px; }
.home-grid { gap: 10px; }
#view-oggi .digest-item { padding: 7px 2px; }
#view-oggi .event-row, #view-oggi .activity-row { padding: 7px 0; }

/* Home "Prossimi appuntamenti" (17 lug sera): righe pulite, senza il riquadro
   ereditato dallo stile .event-row del calendario. Niente box per ogni voce:
   un separatore sottile tra le righe e più aria attorno al testo. */
#nextReminderBody .event-row-plain {
  border: none; border-radius: 0; background: transparent; overflow: visible;
  padding: 13px 4px; margin: 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-end; justify-content: space-between; gap: 10px;
}
#nextReminderBody .event-row-plain:last-child { border-bottom: none; padding-bottom: 4px; }
#nextReminderBody .event-row-plain:first-child { padding-top: 4px; }
#nextReminderBody .event-row-plain .er-body { flex: 1; min-width: 0; }
#nextReminderBody .event-row-plain .er-title { font-size: 15px; line-height: 1.35; }
#nextReminderBody .event-row-plain .er-date { margin-top: 3px; }
/* Conto alla rovescia: in basso a destra, opposto all'orario, su una riga. */
#nextReminderBody .er-countdown { flex: 0 0 auto; align-self: flex-end; text-align: right; }
#nextReminderBody .er-countdown .r-countdown { margin: 0; white-space: nowrap; color: var(--urg, var(--accent-deep)); }

/* Colore per URGENZA (card dinamica "Appuntamenti in arrivo"): una barretta a
   sinistra + il conto alla rovescia colorato. Oggi/domani = mattone tenue,
   entro la settimana = ambra, oltre nel mese = lavanda (calmo). Mai sulle
   persone: solo sull'appuntamento. */
#nextReminderBody .event-row-plain { position: relative; padding-left: 13px; }
#nextReminderBody .event-row-plain::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px; background: var(--urg, transparent);
}
#nextReminderBody .urg-now { --urg: var(--danger); }
#nextReminderBody .urg-soon { --urg: var(--warn); }
#nextReminderBody .urg-later { --urg: var(--violet); }

/* Titoli-card cliccabili: ogni card della Home apre la sua funzione completa */
.card-title-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.card-title-btn svg { width: 14px; height: 14px; color: var(--ink-soft); flex: 0 0 auto; }
.card-title-btn:hover { color: var(--accent-deep); }
.journey-card { cursor: pointer; transition: border-color 0.15s ease; }
.journey-card:hover { border-color: var(--accent); }

/* Liste scorrevoli "silenziose": si scorrono col dito o con la rotellina,
   ma senza barra grigia visibile (Promemoria e Prossimi appuntamenti in Home) */
/* (sostituito sotto: barra sottile a sinistra, visibile solo durante lo scorrimento) */


/* "Oggi Serena ti consiglia": il titolo rosa della guida è il link */
button.suggestion-guide {
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; text-align: left;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--accent-deep); margin: 0 0 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
button.suggestion-guide svg { width: 13px; height: 13px; flex: 0 0 auto; }
button.suggestion-guide:hover { color: var(--accent); }

/* Barra di scorrimento "gentile": a destra della card, sottilissima (3px),
   semitrasparente in tinta col malva, visibile solo mentre si scorre. */
.scroll-quiet {
  max-height: 190px; overflow-y: auto;
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
  padding-right: 6px;
}
.scroll-quiet.scrolling { scrollbar-color: rgba(180, 131, 143, 0.4) transparent; }
.scroll-quiet::-webkit-scrollbar { width: 3px; }
.scroll-quiet::-webkit-scrollbar-track { background: transparent; }
.scroll-quiet::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.scroll-quiet.scrolling::-webkit-scrollbar-thumb { background: rgba(180, 131, 143, 0.4); }

/* ============================================================
   EVOLUZIONE FAMIGLIA — macro-aree espandibili, dashboard compatta
   ============================================================ */
/* Sezioni espandibili con freccetta laterale (▸ chiusa, ▾ aperta) */
.acc-section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
}
.acc-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600;
  color: var(--ink); padding: 13px 14px;
}
.acc-head:hover { color: var(--accent-deep); }
.acc-arrow { width: 15px; height: 15px; color: var(--accent-deep); transition: transform 0.15s ease; flex: 0 0 auto; }
.acc-section.open .acc-arrow { transform: rotate(90deg); }
.acc-section.danger .acc-head { color: var(--danger); }
.acc-body { padding: 0 10px 10px; }
.acc-body > .card { border: none; box-shadow: none; margin-bottom: 0; padding: 4px 6px 10px; }
.acc-body > div[id] > .card { border: none; box-shadow: none; margin-bottom: 8px; padding: 4px 6px 10px; }
@media (prefers-reduced-motion: reduce) { .acc-arrow { transition: none; } }

/* Dashboard fascicolo: foto più piccola e spazi recuperati (§5) */
.member-hero { padding: 2px 0 8px; }
.member-hero .mh-avatar, .member-hero .mh-avatar-empty { width: 92px; height: 92px; }
.member-hero .mh-avatar-empty svg { width: 34px; height: 34px; }
.member-hero h2 { font-size: 23px; margin: 8px 0 1px; }
.member-hero .mh-age { margin: 0 0 6px; }
.member-hero .mh-family { margin: 8px 0 4px; }

/* Card Benessere nella dashboard della mamma (§6) */
.benessere-card { cursor: pointer; transition: border-color 0.15s ease; }
.benessere-card:hover { border-color: var(--accent); }
.benessere-card .ben-text { margin: 0; font-size: 13.5px; color: var(--ink); font-style: italic; }
.benessere-card .p-chevron { width: 15px; height: 15px; color: var(--ink-soft); }

/* Allegati della bozza email: riga con nome, scarica e rimuovi */
.email-attach-list { margin-bottom: 6px; }
.email-attach-row {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px;
}
.email-attach-row .ea-ico { width: 16px; height: 16px; color: var(--accent-deep); flex: 0 0 auto; }
.email-attach-row .ea-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Barra input avanzata: comandi "/" e suggerimenti ---------- */
.slash-menu {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; margin: 0 2px 8px; max-height: 240px; overflow-y: auto;
}
.slash-item {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: none; border: none; border-radius: 10px; padding: 8px 10px;
  cursor: pointer; font: inherit; color: var(--ink); width: 100%;
}
.slash-item:hover { background: var(--accent-soft); }
.slash-item .slash-cmd { font-weight: 600; color: var(--accent-deep); flex: 0 0 auto; }
.slash-item .slash-hint { font-size: 12.5px; color: var(--ink-soft); }
.intent-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 2px 8px; }
.intent-chip {
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid transparent;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.intent-chip:hover { border-color: var(--accent); }

/* ---------- DOCUMENTI SANITARI: archivio per profilo ---------- */
.doc-filters { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.doc-filters .doc-search {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font: inherit; background: var(--bg-deep); color: var(--ink);
}
.doc-filter-row { display: flex; gap: 8px; }
.doc-filter-row select {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; background: var(--surface); color: var(--ink);
}
.doc-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.doc-item .doc-ico, .doc-item .doc-thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.doc-item .doc-ico svg { width: 20px; height: 20px; }
.doc-item .doc-main { flex: 1; min-width: 0; }
.doc-item .doc-title { font-weight: 600; font-size: 14px; }
.doc-item .doc-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; line-height: 1.4; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.doc-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-deep); color: var(--ink-soft);
}
.doc-chip.link { background: var(--violet-soft); color: var(--violet); }
.doc-chip.status-attivo { background: #E4F1E4; color: #4c8a4c; }
.doc-chip.status-storico { background: var(--bg-deep); color: var(--ink-soft); }
.doc-chip.status-da-approfondire { background: #FBF3D9; color: #a98a2a; }
.doc-chip.status-in-attesa { background: var(--accent-soft); color: var(--accent-deep); }
.doc-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.doc-act {
  width: 30px; height: 30px; border: none; background: transparent; cursor: pointer;
  color: var(--ink-soft); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
.doc-act:hover { background: var(--bg-deep); color: var(--accent-deep); }
.doc-act svg { width: 16px; height: 16px; }
.doc-upload-row { display: flex; gap: 8px; }
.doc-upload-row .btn-ghost { flex: 1; }
.doc-file-name { margin: 6px 0 2px; }
.df-auto-hint { font-weight: 400; }

/* ---------- Card scorribili (Calendario / Promemoria), stile Home ---------- */
.card-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.card-strip::-webkit-scrollbar { display: none; }
.card-strip.dragging { cursor: grabbing; }
.strip-card {
  flex: 0 0 auto; width: 220px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative;
}
.strip-card.past { opacity: .62; }
.strip-card.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.strip-card .sc-when { font-size: 11.5px; font-weight: 600; color: var(--accent-deep); text-transform: capitalize; }
.strip-card .sc-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.strip-card .sc-meta { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.strip-card .sc-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.strip-card .sc-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0;
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.strip-card .sc-del svg { width: 15px; height: 15px; }
.strip-card .sc-check { align-self: flex-start; }
.strip-empty { color: var(--ink-soft); font-size: 13px; padding: 6px 2px; }

/* ---------- NOTE del profilo (stile Samsung Notes, grafica Serena) ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.note-tile {
  text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; min-height: 96px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; box-shadow: var(--shadow-sm); font: inherit; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.note-tile:active { transform: scale(0.98); }
.note-tile .note-tile-title { font-weight: 600; font-size: 14px; }
.note-tile .note-tile-text {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.note-tile .note-tile-date { font-size: 11px; color: var(--ink-soft); opacity: .8; }

/* Tavolozza pastello coerente con la palette calda di Serena */
.note-default { background: var(--surface); }
.note-giallo  { background: #FBF3D9; border-color: #F1E4B8; }
.note-verde   { background: #E4F1E4; border-color: #C9E2C9; }
.note-rosa    { background: var(--accent-soft); border-color: #EBD3DA; }
.note-azzurro { background: #E1EEF4; border-color: #C6DEE8; }
.note-lavanda { background: var(--violet-soft); border-color: #DED2EE; }

.note-editor .note-colors { display: flex; gap: 10px; margin: 4px 0 2px; }
.note-color-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line);
  cursor: pointer; padding: 0;
}
.note-color-dot.active { border-color: var(--accent-deep); box-shadow: 0 0 0 2px var(--accent-soft); }
.note-color-dot.note-default { background: var(--bg-deep); }

/* ============================================================
   SERENA CONSIGLIA — schermata unica personalizzata
   ============================================================ */
.advice-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.advice-hero .page-title { color: var(--accent-deep); }
.advice-spark { display: inline-flex; vertical-align: super; color: var(--accent); }
.advice-spark svg { width: 16px; height: 16px; }
.advice-home { display: flex; flex-direction: column; gap: 6px; }

/* Colori per area della vita (tenui, coerenti con la palette Serena) */
.area-salute { background: #E7F2EA; color: #5E8F6E; }
.area-bambini { background: #F5E8EC; color: #B4838F; }
.area-casa { background: #EAF0E4; color: #7F9367; }
.area-anziani { background: #EFEAF5; color: #9C8AB4; }
.area-animali { background: #E9F2ED; color: #5E8F7E; }
.area-viaggi { background: #E8EEF5; color: #6D87A8; }
.area-documenti { background: #EAF1F6; color: #5F86A8; }
.area-altro { background: #F3ECE3; color: #8B7E8D; }
.area-tutto { background: var(--accent-soft); color: var(--accent-deep); }

/* Testate di sezione */
.advsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.advsec-title { font-size: 19px; margin: 0; font-weight: 600; }
.advsec-sub { color: var(--ink-soft); font-size: 12.5px; margin: 3px 0 0; line-height: 1.45; }
.advsec-all { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.advsec-all svg { width: 14px; height: 14px; }
.advsec-all svg.rot-90 { transform: rotate(90deg); }

/* Caroselli orizzontali (dito e cursore) */
.advice-carousel {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.advice-carousel::-webkit-scrollbar { display: none; }
.advice-carousel.dragging { cursor: grabbing; user-select: none; }
.advice-carousel > * { scroll-snap-align: start; flex-shrink: 0; }

/* Card contestuali "Per voi oggi" */
.ctx-card {
  width: 84%; max-width: 320px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ctx-card-top { display: flex; align-items: center; justify-content: space-between; }
.ctx-icon {
  width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ctx-icon svg { width: 21px; height: 21px; }
.ctx-more { width: 30px; height: 30px; border: none; box-shadow: none; background: transparent; }
.ctx-title { margin: 2px 0 0; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.ctx-sub { margin: 0; color: var(--accent-deep); font-size: 13px; font-weight: 600; }
.ctx-progress { margin-top: 4px; }
.ctx-progress-label { font-size: 12px; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.progress-track { height: 6px; background: var(--bg-deep); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--ink);
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.ctx-chip svg { width: 14px; height: 14px; color: var(--ink-soft); }
.ctx-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.advice-ctx-empty { text-align: center; }
.advice-ctx-empty p:first-child { margin: 4px 0 2px; font-weight: 600; }
.advice-ctx-empty .advice-actions { justify-content: center; margin-top: 10px; }

/* Filtri per area della vita */
.advice-areas {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 12px;
  scrollbar-width: none;
}
.advice-areas::-webkit-scrollbar { display: none; }
.area-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s ease;
}
.area-chip svg { width: 15px; height: 15px; }
.area-chip.active { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }

/* Card guida */
.gd-card {
  width: 72%; max-width: 250px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
}
.gd-card.wide { width: 100%; max-width: none; flex-direction: row; }
.gd-card.wide .gd-art { width: 108px; min-height: 100%; flex-shrink: 0; }
.gd-art {
  height: 96px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.gd-art svg { width: 34px; height: 34px; opacity: 0.85; }
.gd-cat {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255, 255, 255, 0.85); color: inherit;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 999px;
}
.gd-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gd-title { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.gd-desc { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.gd-reason { margin: 0; color: var(--accent-deep); font-size: 12px; font-style: italic; }
.gd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.gd-time { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 12px; }
.gd-time svg { width: 13px; height: 13px; }
.gd-save { background: none; border: none; cursor: pointer; color: var(--ink-soft); padding: 4px; }
.gd-save svg { width: 17px; height: 17px; }
.gd-save.on { color: var(--accent-deep); }
.gd-save.on svg { fill: var(--accent-soft); }
.gd-list { display: flex; flex-direction: column; gap: 12px; }

/* Card checklist modello */
.tplc-card {
  width: 46%; max-width: 170px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 13px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.tplc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tplc-grid .tplc-card { width: auto; max-width: none; }
.tplc-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tplc-icon svg { width: 19px; height: 19px; }
.tplc-title { margin: 4px 0 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.tplc-meta { margin: 0; color: var(--ink-soft); font-size: 12px; }
.tplc-pct { margin: 2px 0 0; font-size: 11.5px; color: var(--accent-deep); font-weight: 600; text-align: right; }
.tplc-use {
  margin-top: auto; background: transparent; border: 1px solid var(--accent);
  color: var(--accent-deep); border-radius: 999px; padding: 7px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;
}
.tplc-use:hover { background: var(--accent-soft); }
.tplc-use.continue { border-color: #D9A662; color: #A87A3C; }
.tplc-use.continue:hover { background: #F7EEDF; }

/* Card prodotto */
.pc-card {
  width: 46%; max-width: 180px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
}
.pc-card.wide { width: 100%; max-width: none; flex-direction: row; }
.pc-card.wide .pc-art { width: 104px; height: auto; flex-shrink: 0; }
.pc-art { height: 92px; position: relative; display: flex; align-items: center; justify-content: center; }
.pc-art svg { width: 30px; height: 30px; opacity: 0.8; }
.pc-save {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft);
}
.pc-save svg { width: 15px; height: 15px; }
.pc-save.on { color: var(--accent-deep); }
.pc-save.on svg { fill: var(--accent); stroke: var(--accent); }
.pc-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pc-title { margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.pc-desc { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { margin-top: 2px; }
.pc-score {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--violet-soft); color: var(--violet);
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px;
}
.pc-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.pc-price { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-right: auto; }
.pc-aff {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px; font-size: 10.5px; color: var(--ink-soft); cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.pc-aff svg { width: 11px; height: 11px; }
.pc-more { width: 28px; height: 28px; border: none; box-shadow: none; background: transparent; flex-shrink: 0; }
.pc-list { display: flex; flex-direction: column; gap: 12px; }

/* Più apprezzati */
.pop-card {
  width: 60%; max-width: 210px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 13px 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-family: 'Inter', sans-serif; text-align: left;
}
.pop-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; color: #A87A3C; }
.pop-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pop-icon svg { width: 18px; height: 18px; }
.pop-title { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }

/* Trasparenza */
.advice-transparency { margin-top: 14px; }
.advtr-row { display: flex; gap: 12px; align-items: flex-start; }
.advtr-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.advtr-icon svg { width: 19px; height: 19px; }
.advtr-title { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.advtr-text { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.advtr-more { margin-top: 8px; margin-left: 50px; }
.adv-search-group { margin: 16px 0 10px; }

/* Scheda guida */
.gd-cat-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.gsheet-title { margin-bottom: 4px; }
.gsheet-body { margin-top: 12px; }
.gsheet-body p { line-height: 1.65; font-size: 14.5px; white-space: pre-line; }
.gsheet-actions { margin-top: 16px; flex-wrap: wrap; }

/* Scheda prodotto completa */
.psheet-meta { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.psheet-brand { color: var(--ink-soft); font-size: 13px; }
.psheet-desc { line-height: 1.6; }
.psheet-rows { margin: 14px 0 6px; }
.psheet-rows dt { font-weight: 600; font-size: 13px; color: var(--accent-deep); margin-top: 12px; }
.psheet-rows dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.psheet-price { margin: 14px 0 4px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); }
.psheet-price-main { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.psheet-links-title { font-weight: 600; font-size: 13.5px; margin: 14px 0 8px; }
.psheet-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-aff {
  font-size: 10.5px; background: var(--bg-deep); color: var(--ink-soft);
  border-radius: 999px; padding: 3px 9px; font-weight: 600;
}
.psheet-actions { margin-top: 14px; flex-wrap: wrap; }


/* ============================================================
   RICORDI — timeline con binario date + diario a libro (mockup)
   ============================================================ */
.memory-mode {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin: 2px 0 10px; box-shadow: var(--shadow-sm);
}
.mm-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: none; border-radius: 999px; padding: 9px 12px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease;
}
.mm-btn svg { width: 16px; height: 16px; }
.mm-btn.active { background: var(--accent-soft); color: var(--accent-deep); }

.memory-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.memory-chips::-webkit-scrollbar { display: none; }
.mem-chip {
  flex-shrink: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.mem-chip.active { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }

/* Proposte automatiche di Serena (solo da dati reali, con conferma) */
.memory-proposal {
  display: flex; gap: 12px; background: var(--violet-soft);
  border: 1px solid #E0D7EC; border-radius: var(--radius);
  padding: 13px 14px; margin-bottom: 14px;
}
.mp-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); color: var(--violet);
  display: inline-flex; align-items: center; justify-content: center;
}
.mp-icon svg { width: 17px; height: 17px; }
.mp-title { margin: 0 0 3px; font-weight: 600; font-size: 13.5px; }
.mp-text { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.mp-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.mp-actions .btn-primary, .mp-actions .btn-ghost { padding: 7px 13px; font-size: 12.5px; }

/* Timeline con binario delle date */
.tl-month { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; margin: 16px 0 10px; }
.tl-group { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tl-group::before {
  content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px;
  border-left: 2px dotted var(--line);
}
.tl-item { display: flex; gap: 12px; position: relative; }
.tl-rail {
  width: 44px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  padding-top: 6px; position: relative; z-index: 1;
}
.tl-day { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; line-height: 1; }
.tl-mon { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 2px; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px; border: 2px solid var(--bg); }
.tl-dot.heart { background: var(--accent-deep); }
.tl-dot.first { background: #D9A662; }
.tl-dot.event { background: var(--violet); }
.tl-dot.salute { background: #5E8F6E; }
.tl-dot.diary { background: var(--accent); }
.tl-card {
  flex: 1; display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 11px; cursor: pointer;
}
.tl-thumb { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.tl-thumb-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-deep); color: var(--ink-soft); }
.tl-thumb-icon svg { width: 22px; height: 22px; }
.tl-body { flex: 1; min-width: 0; }
.tl-title { margin: 0 0 2px; font-weight: 600; font-size: 14px; line-height: 1.3; }
.tl-text { margin: 0 0 6px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 9px; background: var(--bg); color: var(--ink-soft);
}
.tl-chip.heart { background: var(--accent-soft); color: var(--accent-deep); }
.tl-chip.first { background: #F7EEDF; color: #A87A3C; }
.tl-chip.event { background: var(--violet-soft); color: var(--violet); }
.tl-chip.salute { background: #E7F2EA; color: #5E8F6E; }
.tl-more { width: 30px; height: 30px; border: none; box-shadow: none; background: transparent; flex-shrink: 0; }
.memory-add-btn { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.memory-add-btn svg { width: 18px; height: 18px; }

/* Diario a libro — agenda Moleskine: copertina (colore a scelta), elastico,
   segnalibro, carta a righe. La pagina ruota sul dorso come carta vera. */
.db-cover {
  position: relative;
  /* Angoli RETTI sul lato del dorso, come un diario rilegato vero */
  border-radius: 0 16px 16px 0;
  /* La pagina arriva a FILO del dorso: da davanti la copertina non si vede
     sotto il lato dove si scrive, come in un'agenda vera. Sopra il colore
     è pieno (5px); a destra e sotto la pila di fogli copre parte della
     cornice (8px), così il colore VISIBILE è uguale su tutti i lati.
     (Questi valori vanno tenuti allineati con gli inset di .db-stack,
     .db-under e .db-flyback.) */
  padding: 5px 8px 8px 0;
  margin: 4px -8px 12px;   /* la pagina occupa quasi tutta la larghezza */
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  perspective: 1600px;     /* abbastanza vicina da vedere il 3D, senza deformare */
}
/* Pila delle pagine sotto il foglio che gira: resta FERMA quando la pagina
   si solleva, così il foglio sembra sottile come carta vera. */
.db-stack {
  position: absolute; top: 5px; left: 0; right: 8px; bottom: 8px;
  background: linear-gradient(160deg, #FBF6EA 0%, #F6EEDC 100%);
  border: 1px solid #EDE4D2;
  border-radius: 0 12px 12px 0;
  /* Pila discreta (1/2/3px): non deve mangiarsi la cornice colorata */
  box-shadow:
    1px 1px 0 #F6EEDF, 2px 2px 0 #F0E6D1, 3px 3px 0 #E8DCC2,
    4px 5px 10px rgba(58, 50, 60, 0.18);
  pointer-events: none;
}
/* Colori della copertina (dal menù ⋮ del diario) */
.db-cover.theme-rosa { background: linear-gradient(135deg, #C9909B 0%, #B47A87 60%, #A96F7D 100%); }
.db-cover.theme-azzurro { background: linear-gradient(135deg, #93AEC9 0%, #7B96B4 60%, #6F89A8 100%); }
.db-cover.theme-verde { background: linear-gradient(135deg, #9BB394 0%, #829D7C 60%, #76926F 100%); }
.db-cover.theme-grigio { background: linear-gradient(135deg, #BDB7B4 0%, #A8A19E 60%, #9C9592 100%); }
.db-cover.theme-giallo { background: linear-gradient(135deg, #D9C48D 0%, #C6AE74 60%, #B9A067 100%); }
.db-cover.theme-bianco { background: linear-gradient(135deg, #F4F1EA 0%, #E5E0D5 60%, #DAD4C7 100%); }
.db-cover.theme-nero { background: linear-gradient(135deg, #4C474D 0%, #353036 60%, #2A262B 100%); }
/* Il segnalibro parla la lingua di Serena: per ogni copertina usa le
   tinte morbide della palette dell'app (accento → accento scuro),
   polverose e appena più scure della copertina. */
.db-cover.theme-rosa .db-ribbon { background: linear-gradient(180deg, #B4838F, #97606F); }
.db-cover.theme-azzurro .db-ribbon { background: linear-gradient(180deg, #8AA5C0, #67849F); }
.db-cover.theme-verde .db-ribbon { background: linear-gradient(180deg, #8FA98B, #6E8C6B); }
.db-cover.theme-grigio .db-ribbon { background: linear-gradient(180deg, #A39DA8, #7E7885); }
.db-cover.theme-giallo .db-ribbon { background: linear-gradient(180deg, #C4AB72, #A18A52); }
.db-cover.theme-bianco .db-ribbon { background: linear-gradient(180deg, #A8A2AA, #7A747E); }
.db-cover.theme-nero .db-ribbon { background: linear-gradient(180deg, #55505A, #38343D); }
/* Dorso del libro: ora la pagina è a filo, quindi la banda è l'ombra
   della RILEGATURA che cade direttamente sulla carta — leggera. */
.db-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(40, 30, 35, 0.13), rgba(40, 30, 35, 0));
  border-radius: 0;
  pointer-events: none;
  z-index: 5;
}
.diary-book2 {
  position: relative;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
  touch-action: pan-y;
}
/* Lo strato che si incurva: contiene fronte e retro della carta. La flessione
   (rotazione contraria sul bordo esterno) è massima a metà giro e si spegne
   quando il foglio atterra: carta morbida, non cartone. */
.db-sheet {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: right center;
  will-change: transform;
  border-radius: 0 12px 12px 0;
}
/* FRONTE del foglio: la pagina scritta. È lui a portare carta, bordo e ombre;
   sparisce (backface) quando il foglio supera metà giro. */
.db-inner {
  position: relative;
  padding: 16px 22px 16px 20px;
  min-height: min(600px, 68vh);
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #FEFBF3 0%, #FBF5E7 70%, #F7EFDD 100%);
  border: 1px solid #EDE4D2;
  border-radius: 0 12px 12px 0;
  /* Foglio SOTTILE: solo un filo d'ombra propria + la piega del dorso.
     La pila di pagine vive in .db-stack e non gira con il foglio. */
  box-shadow:
    0 1px 3px rgba(58, 50, 60, 0.12),
    inset 14px 0 22px -16px rgba(120, 90, 60, 0.25);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* RETRO del foglio: carta nuda con le righe in trasparenza. Si vede solo
   quando la pagina è voltata oltre metà giro, come in un libro vero. */
.db-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 33px, rgba(214, 199, 166, 0.4) 33px, rgba(214, 199, 166, 0.4) 34px),
    linear-gradient(200deg, #FBF6EA 0%, #F4EBD8 60%, #EEE3CA 100%);
  border: 1px solid #EDE4D2;
  border-radius: 12px 0 0 12px;
  box-shadow:
    0 1px 3px rgba(58, 50, 60, 0.12),
    inset -10px 0 18px -12px rgba(120, 90, 60, 0.3);
}
/* Mentre il foglio si piega o si volta, l'ombra si stacca dalla pila */
.diary-book2.folding .db-inner, .diary-book2.turning .db-inner {
  box-shadow: 10px 6px 22px rgba(58, 50, 60, 0.28), inset 16px 0 24px -16px rgba(120, 90, 60, 0.35);
}
.diary-book2.folding .db-back, .diary-book2.turning .db-back {
  box-shadow: 10px 6px 22px rgba(58, 50, 60, 0.28), inset -16px 0 24px -16px rgba(120, 90, 60, 0.4);
}
.diary-book2.turning { pointer-events: none; }
/* Curvatura del foglio (mountPageCurl): tre strisce verticali incernierate.
   La striscia del dorso è solidale al foglio; le altre due ruotano un filo
   di più, così la carta si INCURVA (bordo che guida, dorso che insegue)
   invece di girare rigida come un cartone. */
.db-curlbox { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.db-hinge {
  position: absolute; top: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}
.db-slice { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
/* Fronte della striscia: un ritaglio del clone della pagina */
.db-slice-front {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Retro della striscia: carta nuda con le righe in trasparenza */
.db-slice-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 33px, rgba(214, 199, 166, 0.4) 33px, rgba(214, 199, 166, 0.4) 34px),
    linear-gradient(200deg, #FBF6EA 0%, #F4EBD8 60%, #EEE3CA 100%);
  border-top: 1px solid #EDE4D2; border-bottom: 1px solid #EDE4D2;
}
.db-slice-1 .db-slice-front { border-radius: 0; }
.db-slice-3 .db-slice-front { border-radius: 0 12px 12px 0; }
.db-slice-1 .db-slice-back { border-radius: 0; border-right: 1px solid #EDE4D2; }
.db-slice-3 .db-slice-back { border-radius: 12px 0 0 12px; border-left: 1px solid #EDE4D2; }
/* Luce sulla carta incurvata: si accende a metà giro, striscia per striscia */
.db-slice-shade {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(90, 65, 45, 0.22), rgba(255, 255, 255, 0.07) 55%, rgba(90, 65, 45, 0.10));
}
/* Con il curl montato il foglio vero resta nascosto ma tiene il posto */
.diary-book2.curling .db-sheet { visibility: hidden; }
.diary-book2.curling .db-fold-shade { display: none; }
/* Anteprima della pagina che aspetta sotto il foglio mentre si volta:
   ferma, identica alla pagina vera che comparirà a sfoglio finito. */
.db-under {
  position: absolute; top: 5px; left: 0; right: 8px; bottom: 8px;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
  pointer-events: none;
}
.db-under .diary-book2 { position: absolute; inset: 0; }
.db-under .db-sheet { position: absolute; inset: 0; }
.db-under .db-inner { position: absolute; inset: 0; min-height: 0; }
.db-under .db-back, .db-under .db-fold-shade { display: none; }
/* Ombra portata dal foglio che si volta sulla pagina sottostante:
   solo vicino al dorso, morbida, mai una banda netta. */
.db-under-shade {
  position: absolute; inset: 0; z-index: 4;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(58, 40, 30, 0.45), rgba(58, 40, 30, 0.1) 38%, rgba(58, 40, 30, 0) 70%);
}
/* Il foglio precedente che rientra dal dorso (sfoglio all'indietro) */
.db-flyback {
  position: absolute; top: 5px; left: 0; right: 8px; bottom: 8px;
  pointer-events: none; z-index: 5;
}
.db-flyback .db-sheet { position: absolute; inset: 0; }
.db-flyback .db-inner { position: absolute; inset: 0; min-height: 0; }
.db-foot { margin-top: auto; padding-top: 10px; }
/* Nuovo ricordo: il "+" vive in basso a destra della pagina */
.db-add {
  position: absolute; bottom: 12px; right: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 10px rgba(58, 50, 60, 0.25);
  z-index: 3;
}
.db-add svg { width: 19px; height: 19px; }
.db-add:hover { background: var(--accent-deep); }
/* Ombra mobile della piega: solo la piega del dorso, che si intensifica
   mentre la pagina si volta. NIENTE banda scura sul bordo esterno: sul
   foglio chiaro sembrava una barra grigia, non un'ombra. */
.db-fold-shade {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; z-index: 4;
  background: linear-gradient(100deg,
    rgba(60, 40, 30, 0.5) 0%, rgba(60, 40, 30, 0.12) 20%,
    rgba(255, 255, 255, 0) 45%);
}
/* Segnalibro a nastro che scende dall'alto. Parte ben SOPRA il bordo
   della pagina (l'overflow della pagina lo taglia a filo): così tocca
   sempre il bordo alto, anche con zoom/scala che arrotondano i pixel. */
.db-ribbon {
  position: absolute; top: -6px; right: 104px; width: 13px; height: 68px;
  background: linear-gradient(180deg, #B2607A, #9C4F66);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  box-shadow: 1px 2px 4px rgba(58, 50, 60, 0.2);
  pointer-events: none;
  z-index: 1;
}
.diary-book2.folding { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.diary-book2.folding .db-curl { opacity: 0; }
/* Menù ⋮ del diario, nell'angolo in alto a sinistra della pagina */
.db-menu {
  position: absolute; top: 12px; right: 58px; width: 34px; height: 34px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid #EDE4D2;
  z-index: 2;
}
.db-menu svg { width: 16px; height: 16px; }
.db-heart {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid #EDE4D2; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft); z-index: 2;
}
.db-heart svg { width: 17px; height: 17px; }
.db-heart.on { color: var(--accent-deep); }
.db-heart.on svg { fill: var(--accent); stroke: var(--accent); }
/* La data è cliccabile: apre "Vai a una data" */
.db-datehead {
  text-align: left; margin-bottom: 12px;
  background: none; border: none; padding: 0; cursor: pointer;
  display: block; border-radius: 8px;
}
.db-datehead:hover .db-date { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.db-date {
  font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600;
  color: var(--accent-deep); margin: 0;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.db-weekday { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }
.db-polaroid {
  position: relative; background: #fff; border: 1px solid #EFE8DA;
  box-shadow: 0 4px 14px rgba(58, 50, 60, 0.09);
  padding: 10px 10px 6px; margin: 14px auto 16px; max-width: 300px;
  transform: rotate(-0.6deg);
}
.db-tape {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 86px; height: 22px; background: rgba(226, 180, 190, 0.55);
  border-left: 1px dashed rgba(255,255,255,0.6); border-right: 1px dashed rgba(255,255,255,0.6);
}
.db-photo { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.db-photo-empty {
  height: 150px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--ink-soft);
}
.db-photo-empty svg { width: 30px; height: 30px; }
.db-caption {
  font-family: 'Caveat', cursive; font-size: 26px; text-align: center;
  margin: 8px 0 4px; color: var(--ink); line-height: 1.1;
  border-radius: 6px; outline: none;
}
/* Titolo senza foto: scritto a mano direttamente sulla pagina */
.db-caption-noline {
  text-align: left; font-size: 30px; margin: 2px 0 0;
}
.db-text {
  font-family: 'Caveat', cursive; font-size: 21px;
  color: #4A4048; margin: 8px 2px 12px; white-space: pre-line;
  /* Carta a righe come una Moleskine: la scrittura appoggia sulle righe */
  line-height: 34px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, #E8DCC2 33px, #E8DCC2 34px);
  min-height: 102px;
  border-radius: 6px; outline: none;
}
/* Scrittura sulla pagina: segnaposto quando i campi sono vuoti */
.db-caption:empty::before, .db-text:empty::before {
  content: attr(data-placeholder);
  color: #B9AC97; font-style: italic; pointer-events: none;
}
.db-caption:focus, .db-text:focus { background-color: rgba(255, 255, 255, 0.45); }
/* Aggiungi una foto direttamente dalla pagina (solo quando non c'è) */
.db-addphoto {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1.5px dashed #D8C9AC; border-radius: 999px;
  color: #A08F72; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 8px 15px; margin: 10px 0 2px; cursor: pointer;
}
.db-addphoto svg { width: 16px; height: 16px; }
.db-addphoto:hover { border-color: var(--accent); color: var(--accent-deep); }
.db-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.db-tag {
  font-size: 11.5px; font-weight: 600; font-family: 'Inter', sans-serif;
  background: #fff; border: 1px solid #EDE4D2; border-radius: 999px;
  padding: 5px 11px; color: var(--ink-soft);
}
.db-tag.heart { background: var(--accent-soft); color: var(--accent-deep); border-color: #EBD3DA; }
.db-tag.first { background: #F7EEDF; color: #A87A3C; border-color: #EFDFC2; }
.db-tag.event { background: var(--violet-soft); color: var(--violet); border-color: #E0D7EC; }
.db-tag-add { cursor: pointer; border-style: dashed; background: transparent; }
/* Tag-interruttore: un tocco rimuove la categoria o il tag */
.db-tag-toggle { cursor: pointer; font-family: 'Inter', sans-serif; }
.db-tag-toggle:hover { filter: brightness(0.95); }
/* × per rimuovere la fotografia dalla pagina */
.db-photo-x {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px;
  background: rgba(58, 50, 60, 0.55); color: #fff;
  border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.db-photo-x svg { width: 13px; height: 13px; }
.db-photo-x:hover { background: rgba(58, 50, 60, 0.75); }
/* Il numero di pagina è centrato sull'INTERA pagina; solo i tag scansano
   il "+" in basso a destra, altrimenti il numero pende verso sinistra. */
.db-pageno { text-align: center; color: var(--ink-soft); font-size: 12px; margin: 8px 0 0; }
.db-foot .db-tags { margin-bottom: 0; padding-right: 48px; }
/* Frecce sulla copertina: non ruotano con la pagina */
.db-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: pointer; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; z-index: 6;
  /* Invisibili a riposo (si sfoglia trascinando la pagina): appaiono
     accennate avvicinando il cursore al diario, piene passandoci sopra
     (o al tocco, che su mobile attiva l'hover). Restano sempre cliccabili. */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.db-cover:hover .db-arrow { opacity: 0.45; }
.db-arrow:hover, .db-arrow:focus-visible { opacity: 1; }
.db-arrow svg { width: 17px; height: 17px; }
.db-arrow:disabled { opacity: 0; cursor: default; }
.db-cover:hover .db-arrow:disabled { opacity: 0.2; }
.db-prev { left: -4px; }
.db-next { right: -4px; }
.db-curl {
  position: absolute; right: 0; bottom: 0; width: 44px; height: 44px;
  border-bottom-right-radius: 12px;
  background: linear-gradient(315deg, #E9DCC2 0%, #FBF5E7 55%);
  box-shadow: -3px -3px 8px rgba(58, 50, 60, 0.08);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.db-bottom { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 0; }
.db-dots { display: flex; gap: 6px; }
.db-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.db-dot.on { background: var(--accent-deep); }
/* Suggerimento a scomparsa: appare sul fondo del libro per ~2 secondi */
.db-hint-float {
  position: absolute; left: 50%; bottom: 26px;
  background: rgba(58, 50, 60, 0.78); color: #fff;
  border-radius: 999px; padding: 8px 16px;
  font-size: 12px; white-space: nowrap; margin: 0;
  pointer-events: none; z-index: 7;
  animation: dbHintFloat 2s ease forwards;
}
@keyframes dbHintFloat {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Calendario "Vai a una data": mese vero, segnetto sui giorni con pagine */
.dc-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 12px; }
.dc-title { margin: 0; font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; color: var(--ink); }
.dc-nav {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.dc-nav svg { width: 15px; height: 15px; }
.dc-nav:hover { background: var(--bg); }
/* "Vai a:" — scrivi la data che cerchi e salti dritto alla pagina */
.dc-goto-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.dc-goto {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 13.5px;
  color: var(--ink); background: var(--surface);
}
.dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dc-week { margin-bottom: 2px; }
.dc-week span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); padding: 4px 0; }
.dc-day {
  position: relative; aspect-ratio: 1;
  border: none; background: transparent; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: default; padding: 0;
}
.dc-day:disabled { color: var(--ink-soft); opacity: 0.45; }
.dc-day.has-page { cursor: pointer; font-weight: 600; }
.dc-day.has-page:hover { background: var(--bg-deep); }
.dc-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.dc-day.has-page .dc-dot { background: var(--accent-deep); }
.dc-day.today .dc-num { text-decoration: underline; text-underline-offset: 3px; }
.dc-day.current { background: var(--accent-soft); color: var(--accent-deep); }
.dc-all {
  margin-top: 14px; width: 100%;
  background: none; border: 1px dashed var(--line); border-radius: 999px;
  padding: 11px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.dc-all:hover { background: var(--bg); color: var(--ink); }


/* Link al pannello amministrativo dalle impostazioni */
.admin-link { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 8px; }

/* Impostazioni → Aspetto di Serena: pallini colore */
.theme-dots { display: flex; gap: 14px; padding: 6px 2px 4px; }
.theme-dot {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--line); cursor: pointer; padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-dot:hover { transform: scale(1.08); }
.theme-dot.active { border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-dot-rosa { background: linear-gradient(135deg, #C9909B, #97606F); }
.theme-dot-grigio { background: linear-gradient(135deg, #B9B3BB, #7E7885); }
.theme-dot-verde { background: linear-gradient(135deg, #A5BCA1, #6E8C6B); }
.theme-dot-azzurro { background: linear-gradient(135deg, #A2B9D1, #67849F); }
.theme-dot-giallo { background: linear-gradient(135deg, #D9C48D, #A18A52); }
.theme-dot-bianco { background: linear-gradient(135deg, #FFFFFF, #E7E3DC); }
.theme-dot-nero { background: linear-gradient(135deg, #4A454B, #211E24); }

/* ---- Accesso a Serena (login facoltativo, Supabase) ---- */
.auth-card { max-width: 400px; }
.auth-field {
  display: block; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  margin: 0 0 10px;
}
.auth-field input {
  display: block; width: 100%; margin-top: 5px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--ink); background: var(--surface);
}
.auth-field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.auth-msg { font-size: 13px; color: var(--danger); margin: 2px 0 10px; text-align: left; }
.auth-msg.ok { color: #5E8F6E; }
.auth-submit { width: 100%; }
.auth-check {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 12px; cursor: pointer;
}
.auth-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.auth-check a { color: var(--accent-deep); text-decoration: underline; }
/* Configurazione profilo (§3): card alta scrollabile + foto */
.scroll-card { max-height: 84vh; overflow-y: auto; }
.pc-photo { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.pc-av { width: 56px; height: 56px; }
.pc-av svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-field select {
  display: block; width: 100%; margin-top: 5px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); background: var(--surface);
}
/* §5-§9 — Informazioni essenziali (campi sanitari progressivi) */
.he-field { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; background: var(--surface); }
.he-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.he-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.he-val { font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.he-src { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--ink-soft); background: var(--bg-deep); border-radius: 999px; padding: 2px 8px; }
.he-declined { font-size: 11.5px; color: var(--ink-soft); font-style: italic; }
.he-why { margin: 6px 0 9px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.he-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.he-actions button, .he-actions a { flex: 0 0 auto; font-size: 12.5px; padding: 7px 12px; width: auto; }
.he-prop-inc { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; cursor: pointer; }
.he-prop-inc input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
/* Diagnostica Supabase */
.diag-summary { text-align: left; font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.diag-summary.ok { color: #5E8F6E; }
.diag-summary.bad { color: var(--danger); }
.diag-item { display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px; text-align: left; padding: 8px 0; border-top: 1px solid var(--line); }
.diag-mark { grid-row: span 2; font-weight: 700; }
.diag-item.ok .diag-mark { color: #5E8F6E; }
.diag-item.bad .diag-mark { color: var(--danger); }
.diag-item.warn { background: rgba(200, 80, 60, 0.07); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.diag-item.warn .diag-detail { color: var(--danger); font-weight: 600; }
.diag-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.diag-detail { font-size: 12px; color: var(--ink-soft); grid-column: 2; }
.auth-links { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.auth-link {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  color: var(--accent-deep); font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-local { width: 100%; margin-top: 6px; }

/* Accesso con provider social (Google/Apple) */
.auth-oauth { margin-top: 14px; }
.auth-or {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 12px; color: var(--ink-soft); font-size: 12px;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.auth-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-bottom: 8px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.auth-social:hover { background: var(--bg-deep); border-color: var(--accent-soft); }
.auth-social:disabled { opacity: .6; cursor: default; }
.auth-social-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.auth-social-icon.apple { color: var(--ink); }

/* Famiglia condivisa (Impostazioni → Account) */
.family-share {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.family-share .empty-note { margin: 0 0 4px; line-height: 1.5; }

/* Promemoria in Famiglia: elenco VERTICALE, ogni promemoria nella sua card */
#famAllTodosBody .card-strip {
  display: flex; flex-direction: column; gap: 10px;
  overflow: visible; padding: 2px 0;
}
#famAllTodosBody .strip-card { width: 100%; min-width: 0; max-width: none; }

/* Pannello "Cosa condividere con la famiglia" */
.share-cats { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; text-align: left; }
.share-cat {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.share-cat input { accent-color: var(--accent-deep); width: 17px; height: 17px; }
/* §4.9.7 — schermata "chi vede le tue informazioni salvavita" */
.ec-designee { flex-wrap: wrap; }
.ec-designee .ec-name { flex: 1; min-width: 0; }
.ec-doubt { flex-basis: 100%; margin: 4px 0 0 27px; font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
.ec-count { font-weight: 600; color: var(--ink-soft); margin: 6px 0 12px; text-align: left; }
/* §4.9.7 ④ — contatore ONESTO "chi vede le tue salvavita" (card salvavita): il numero grande = confermati; i pendenti si raccontano a parole, mai sommati. */
.ec-seen-count { display: block; width: 100%; text-align: left; background: none; border: none; padding: 4px 0; font-size: 15px; font-weight: 700; color: var(--accent-deep); cursor: pointer; }
.ec-seen-count:hover { text-decoration: underline; }
.ec-seen-pending { margin: 4px 0 0; font-style: italic; }
.share-when { text-align: left; margin: 0 0 14px; }
.share-when-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.share-when-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 2px; cursor: pointer; }
.share-when-opt input { accent-color: var(--accent-deep); }
.share-chooser .auth-local { margin-top: 8px; }

/* Cosa condividere: ogni categoria con la sua scelta temporale */
.share-cat-row { margin: 0 0 8px; }
.share-cat-when {
  display: flex; gap: 16px; padding: 6px 4px 2px 30px;
}
.share-cat-when .share-when-opt { font-size: 12.5px; color: var(--ink-soft); }

/* Card promemoria in Famiglia: azioni (matita+cestino), checklist di voci */
#famAllTodosBody .strip-card .sc-actions {
  position: absolute; top: 8px; right: 8px; margin: 0;
  display: flex; gap: 4px; flex-wrap: nowrap;
}
#famAllTodosBody .strip-card .sc-edit,
#famAllTodosBody .strip-card .sc-del {
  position: static; width: 26px; height: 26px; padding: 0;
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#famAllTodosBody .strip-card .sc-edit svg,
#famAllTodosBody .strip-card .sc-del svg { width: 15px; height: 15px; }
#famAllTodosBody .strip-card .sc-title { padding-right: 56px; }
.sc-checklist { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sc-cl-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.sc-cl-item input { accent-color: var(--accent-deep); flex: 0 0 auto; }
.sc-cl-item span { flex: 1; min-width: 0; }
.sc-cl-item.done span { text-decoration: line-through; color: var(--ink-soft); }
.sc-cl-del { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; }
.sc-add-item {
  align-self: flex-start; margin-top: 6px; padding: 4px 2px;
  border: none; background: none; color: var(--accent-deep);
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* Card appuntamento nel calendario: matita + cestino */
.reminder-item .r-actions { display: flex; gap: 4px; margin-left: auto; }
.reminder-item .r-edit, .reminder-item .r-del {
  width: 28px; height: 28px; padding: 0; border: none; background: transparent;
  color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.reminder-item .r-edit svg, .reminder-item .r-del svg { width: 15px; height: 15px; }

/* Condivisione del singolo elemento con la famiglia */
.sc-share {
  align-self: flex-start; margin-top: 6px; padding: 5px 11px;
  border: 1px solid var(--accent); border-radius: 999px; background: transparent;
  color: var(--accent-deep); font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.sc-share.on { background: var(--accent-soft); border-color: var(--accent-deep); }
.reminder-item .r-share { color: var(--ink-soft); }
.reminder-item .r-share.on { color: var(--accent-deep); }
.reminder-item .r-share.on svg { fill: var(--accent-soft); }

/* Invii diretti: pulsante "Invia a…" sulle card */
#famAllTodosBody .strip-card .sc-send {
  align-self: flex-start; margin-top: 6px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink-soft); font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.reminder-item .r-send { color: var(--ink-soft); }
.reminder-item .r-send svg { width: 15px; height: 15px; }
/* Selettore destinatari */
.rp-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; text-align: left; }
/* Lista membri della famiglia + ruolo */
.family-members { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.fm-row {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 13px;
}
.fm-top { display: flex; align-items: baseline; gap: 8px; }
.fm-email { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-role { font-size: 11px; color: var(--ink-soft); flex: 0 0 auto; }
.fm-ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-ctrls .fm-person { flex: 1 1 auto; max-width: none; }
.fm-role-btn {
  flex: 0 0 auto; border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent-deep); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; padding: 4px 9px;
}

/* ============================================================
   PROMEMORIA & CALENDARIO — ridisegno (mockup)
   ============================================================ */

/* Intestazione di sezione (titolo grande + sottotitolo) */
.section-head { margin: 2px 2px 12px; }
.section-title { font-family: 'Playfair Display', serif; font-size: 30px; line-height: 1.1; margin: 0; color: var(--ink); }
.section-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

/* Campo di ricerca (al posto delle icone in alto a destra) */
.list-search {
  display: flex; align-items: center; gap: 9px; margin: 0 2px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--shadow-sm);
}
.list-search .ls-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-soft); fill: none; stroke: currentColor; stroke-width: 2; }
.list-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
}
.list-search input::placeholder { color: var(--ink-soft); }

/* Chip filtro (Tutti / Miei / …) */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Avatar tondo dei membri (foto o iniziali) */
.avatar-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.avatar-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-dot.is-family { background: var(--violet-soft); color: var(--violet-deep); }
.avatar-dot.is-family svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* Chip membri del Calendario (avatar + nome) */
.member-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; }
.member-chips::-webkit-scrollbar { display: none; }
.member-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 5px 13px 5px 6px; cursor: pointer; white-space: nowrap;
}
.member-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.member-chip.active .avatar-dot { box-shadow: 0 0 0 2px #fff; }

/* ---- Gruppi temporali dei promemoria ---- */
.todo-group { margin-bottom: 14px; }
.tg-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer; padding: 4px 2px 10px;
  font-family: 'Playfair Display', serif; color: var(--ink);
}
.tg-head .tg-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent-deep); fill: none; stroke: currentColor; stroke-width: 1.9; }
.tg-label { font-size: 20px; font-weight: 700; }
.tg-count {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg-deep); border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center;
}
.tg-chev { width: 18px; height: 18px; margin-left: auto; color: var(--ink-soft); fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(90deg); transition: transform .2s ease; }
.todo-group.collapsed .tg-chev { transform: rotate(0deg); }
.todo-group.collapsed .tg-body { display: none; }
.tg-body { display: flex; flex-direction: column; gap: 10px; }

/* ---- Card promemoria ricca ---- */
.todo-card {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  width: 100%; padding: 13px 12px 13px 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.todo-card .tc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.todo-card.prio-alta .tc-bar { background: var(--danger); }
.todo-card.prio-media .tc-bar { background: #C7943F; }
.todo-card.prio-bassa .tc-bar { background: #6E86B0; }
.todo-card.is-done { opacity: .7; }
.todo-card .tc-check { flex: 0 0 auto; display: inline-flex; cursor: pointer; padding-top: 1px; }
.todo-card .tc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.todo-card .tc-box {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  display: inline-block; position: relative; transition: all 0.15s ease;
}
.todo-card .tc-check input:checked + .tc-box { background: var(--accent); border-color: var(--accent); }
.todo-card .tc-check input:checked + .tc-box::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.todo-card .tc-body { flex: 1; min-width: 0; }
.todo-card .tc-title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.todo-card.is-done .tc-title { text-decoration: line-through; color: var(--ink-soft); }
.todo-card .tc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 5px; }
.todo-card .tcm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.todo-card .tcm svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.todo-card .tcm-cat svg { color: var(--accent-deep); }
.todo-card .tcm-av { width: 20px; height: 20px; font-size: 9px; }
.todo-card .tc-attrib {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--bg-deep); border-radius: 999px; padding: 3px 9px;
}
.todo-card .tc-attrib svg { width: 12px; height: 12px; }
.todo-card .tc-attrib.attr-serena { background: var(--violet-soft); color: var(--violet-deep); }
.todo-card .tc-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prio-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px;
}
.prio-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.prio-badge.prio-alta { background: #F6E2E2; color: var(--danger); }
.prio-badge.prio-media { background: #F5EAD6; color: #97701F; }
.prio-badge.prio-bassa { background: #E6ECF6; color: #4C689B; }
.tc-clcount { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; }
.tc-clcount:hover { color: var(--accent-deep); }
.tc-clcount svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.todo-card .tc-menu {
  flex: 0 0 auto; width: 30px; height: 30px; background: transparent; border: none;
  color: var(--ink-soft); cursor: pointer; align-self: flex-start;
}
.todo-card .tc-menu svg { width: 17px; height: 17px; fill: currentColor; }
.todo-card .sc-checklist { margin-top: 8px; }

/* Card "Serena suggerisce" inline nella lista promemoria */
.todo-suggest { margin-bottom: 14px; }

/* ---- Editor promemoria: due campi affiancati ---- */
.form-2col { display: flex; gap: 12px; }
.form-2col > label { flex: 1; min-width: 0; }

/* Creazione rapida del promemoria */
.quick-add { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.quick-add input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 15px; font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--ink); background: var(--surface);
}
.quick-add input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.qa-add {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.qa-add:hover { background: var(--accent-deep); }
.qa-add svg { width: 20px; height: 20px; }

/* Calendario: il tenere-premuto è la nostra scorciatoia, non una selezione */
.cal-day {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* Collega account a persona del profilo (Impostazioni → Account) */
.fm-person {
  flex: 0 0 auto; max-width: 40%; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 6px; font-family: 'Inter', sans-serif; font-size: 11.5px;
  color: var(--ink); background: var(--surface);
}

/* "Assegna a": tendina a righe (persona + eventuale account collegato) */
.assign-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.assign-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.assign-row .ar-check {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px;
  border: 2px solid var(--line); position: relative;
}
.assign-row.on .ar-check { background: var(--accent); border-color: var(--accent); }
.assign-row.on .ar-check::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.assign-row .ar-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.assign-row .ar-acc { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.assign-row.on { border-color: var(--accent); background: var(--accent-soft); }

/* Primo avvio: scelta della figura (identità) */
.id-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.id-choices button { width: 100%; }

/* Identità a Vita — anteprima dell'handover (H1) */
.hp-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.hp-box.hp-in { border-color: var(--accent-soft); background: var(--accent-soft); }
/* UX handover→famiglia: nota calda "siete già in famiglia insieme?" */
.hp-box.hp-note { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.hp-note-text { margin: 0; }
.hp-head { font-size: 0.82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.hp-in .hp-head { color: var(--accent); }
.hp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); }
.hp-row:first-of-type { border-top: none; }
.hp-in .hp-row { border-top-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.hp-row span { color: var(--ink); }
.hp-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-row.hp-empty { justify-content: flex-start; color: var(--ink-soft); font-style: italic; }
.hp-disclaimer { font-size: 0.86rem; color: var(--ink-soft); background: var(--bg-deep); border-radius: 10px; padding: 8px 10px; }
.hp-soon { font-size: 0.86rem; color: var(--ink-soft); }
.pp-err { color: #c0392b; font-size: 0.86rem; margin: 6px 0 0; }
.hv-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; text-align: center; background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 14px; margin: 12px 0; user-select: all; }
.mh-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mh-actions button { flex: 1 1 auto; }

/* ============================================================
   IL BENVENUTO DI SERENA (onboarding Fase 1)
   ============================================================ */
.welcome-card { max-width: 420px; }
.wb-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 10px; }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: #e3d5d9; cursor: pointer; transition: background .2s, transform .2s; }
.wb-dot.active { background: #97606F; transform: scale(1.25); }
.wb-actions { display: flex; flex-direction: column; gap: 8px; }

/* Suggerimenti al momento giusto (onboarding Fase 2): biglietto discreto
   sopra la barra di navigazione, resta finche' non dici "Ho capito". */
.serena-hint { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 900;
  background: #fff7f4; border: 1px solid #e8cdd4; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(90, 40, 55, .18); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; }
.serena-hint-text { flex: 1; font-size: .92rem; line-height: 1.35; color: #5a3a44; text-align: left; }
.serena-hint-ok { flex-shrink: 0; padding: 8px 14px; }

/* La stanza della pagina di diario (onboarding Fase 3): un timbro leggero
   sotto la data, come scritto a matita. Sempre visibile mentre scrivi. */
.db-home { text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #b78f9a; margin: -2px 0 6px; user-select: none; }
.db-home:empty { display: none; }
/* Il secondo timbro: A CHI appartiene la pagina ("Per Leonardo"), sotto la stanza. */
.db-person { text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9d7f8a; margin: -4px 0 6px; user-select: none; }
.db-person:empty { display: none; }
/* FV1 (SRD-13): il luogo del ricordo, sotto i timbri ("📍 al parco"). */
.db-place { text-align: center; font-size: .72rem; color: #a08894; margin: -4px 0 6px; user-select: none; }
.db-place:empty { display: none; }
/* §4.3.1.6: badge lucchetto — chi legge la pagina quando NON è di tutta la
   famiglia. Stesso peso visivo dei timbri (stanza/persona), non un avviso. */
.db-lock { text-align: center; font-size: .68rem; letter-spacing: .04em; color: #9d7f8a; margin: -2px 0 6px; user-select: none; }
.db-lock:empty { display: none; }
/* §4.9.7 — editor contatti d'emergenza (lista ordinata) */
.ec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(128,128,128,.18); }
.ec-row .ec-info { font-size: .95rem; }
.ec-row .ec-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ec-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ec-add input { flex: 1 1 30%; min-width: 90px; }
.tl-chip.tl-place { background: var(--violet-soft); color: var(--violet-deep); margin-left: 6px; }

/* ============================================================
   IL TUO DIARIO IN PDF (stampa, 16 lug 2026): la vista-libro per la
   carta. Nascosta a schermo; in stampa nasconde l'app e mostra solo
   il diario impaginato. "Salva come PDF" del browser = costo zero.
   ============================================================ */
#diaryPrintRoot { display: none; }
@media print {
  body.printing-diary > *:not(#diaryPrintRoot) { display: none !important; }
  body.printing-diary { background: #fff !important; margin: 0; }
  #diaryPrintRoot { display: block; font-family: Georgia, 'Times New Roman', serif; color: #2d2226; }
  #diaryPrintRoot .dp-cover { min-height: 88vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; page-break-after: always; }
  #diaryPrintRoot .dp-cover h1 { font-size: 32pt; font-weight: normal; margin: 0 0 14pt; }
  #diaryPrintRoot .dp-sub { font-size: 12pt; color: #8a6b75; margin: 3pt 0; }
  #diaryPrintRoot .dp-brand { margin-top: 42pt; font-size: 10.5pt; letter-spacing: .25em;
    color: #97606F; text-transform: uppercase; }
  /* UNA pagina di diario per OGNI foglio (feedback utente 16 lug): come un
     libro vero, non una timeline. Vale su qualsiasi formato carta (A4/A5:
     il formato si sceglie nella finestra di stampa). L'ultima pagina non
     forza il salto: niente foglio bianco in coda. */
  #diaryPrintRoot .dp-page { page-break-inside: avoid; padding: 26pt 0 0; }
  #diaryPrintRoot .dp-page:not(:last-of-type) { page-break-after: always; }
  #diaryPrintRoot .dp-head { display: flex; justify-content: space-between; gap: 12pt;
    font-size: 9.5pt; color: #8a6b75; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: .75pt solid #e6d8dd; padding-bottom: 6pt; margin-bottom: 14pt; }
  #diaryPrintRoot .dp-title { font-size: 17pt; font-weight: 600; margin: 0 0 10pt; }
  #diaryPrintRoot .dp-photo { max-width: 78%; max-height: 330pt; display: block; margin: 4pt auto 14pt;
    border: 5pt solid #fff; outline: .75pt solid #e6d8dd; }
  #diaryPrintRoot .dp-text { font-size: 11.5pt; line-height: 1.7; white-space: pre-wrap; margin: 0; }
}

/* M4 · «Riepilogo da stampare o portare al medico» (punto 14 del presidente):
   una pagina sola, per persona, da stampare o salvare in PDF. */
#riepPrintRoot { display: none; }
@media print {
  body.printing-riep > *:not(#riepPrintRoot) { display: none !important; }
  body.printing-riep { background: #fff !important; margin: 0; }
  #riepPrintRoot { display: block; font-family: Georgia, 'Times New Roman', serif; color: #2d2226; padding: 22pt; }
  #riepPrintRoot h1 { font-size: 19pt; margin: 0 0 2pt; }
  #riepPrintRoot .rp-sub { font-size: 10pt; color: #6b5f66; margin: 0 0 16pt; }
  #riepPrintRoot h2 { font-size: 12.5pt; margin: 14pt 0 4pt; border-bottom: .75pt solid #e6d8dd; padding-bottom: 2pt; }
  #riepPrintRoot p, #riepPrintRoot li { font-size: 11pt; line-height: 1.55; margin: 2pt 0; }
  #riepPrintRoot ul { margin: 2pt 0 2pt 14pt; padding: 0; }
  #riepPrintRoot .rp-q { margin-left: 10pt; font-style: italic; }
}

/* Stampa/PDF di una singola NOTA (dal menù ⋮ dell'editor) */
#notePrintRoot { display: none; }
@media print {
  body.printing-note > *:not(#notePrintRoot) { display: none !important; }
  body.printing-note { background: #fff !important; margin: 0; }
  #notePrintRoot { display: block; font-family: Georgia, 'Times New Roman', serif; color: #2d2226; padding: 22pt; }
  #notePrintRoot .np-title { font-size: 20pt; font-weight: 600; margin: 0 0 14pt; }
  #notePrintRoot .np-body { font-size: 12pt; line-height: 1.7; white-space: pre-wrap; }
  #notePrintRoot .np-body div { margin: 2pt 0; }
  #notePrintRoot .np-body img { max-width: 100%; display: block; margin: 8pt 0; }
  #notePrintRoot .np-body .note-attach { color: #2d2226; text-decoration: none; }
  #notePrintRoot .np-body .note-link { color: #2d2226; }
  #notePrintRoot .np-draw { max-width: 100%; display: block; margin: 16pt 0 0; }
}

/* Copertina personalizzabile del diario in PDF: anteprima foto nel
   dialogo (a schermo) + foto e dedica sulla copertina (in stampa). */
.dp-photo-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.dp-photo-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); }
@media print {
  #diaryPrintRoot .dp-cover-photo { max-width: 55%; max-height: 280pt; display: block;
    margin: 0 0 18pt; border: 6pt solid #fff; outline: .75pt solid #e6d8dd; }
  #diaryPrintRoot .dp-dedica { font-style: italic; font-size: 13pt; color: #6d545c;
    margin: 0 0 14pt; max-width: 70%; line-height: 1.5; }
}

/* Delega di cura: le azioni del titolare hanno PARI dignità visiva e
   "Consegna subito" viene PRIMA (decisione utente 16 lug: in buona fede
   la richiesta è un gesto di cura — non si parte dal sospetto). Stessa
   taglia, colori distinti: consegnare azzurro sereno, annullare il
   rosato dell'app. */
.care-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex-shrink: 0; }
.care-actions .btn-primary, .care-actions .btn-ghost {
  padding: 8px 14px; font-size: 12.5px; white-space: nowrap; text-align: center; margin: 0; }
.care-actions .care-give { background: #6E93B8; }
.care-actions .care-give:hover { background: #5D81A6; }
.care-actions .care-stop { background: var(--accent-deep); }
.care-actions .care-stop:hover { background: var(--accent); }

/* ============================================================
   HOME v2 (SRD-026 §4.1) — saluto=stato, Cose da seguire,
   Chiedi a Serena, eroe del giorno zero, card ricordo.
   ============================================================ */
.home-status-sub { font-size: 14px; color: var(--ink-soft-strong); margin: 2px 0 14px; }  /* §10: 5.8:1 (era 3.84 col token globale) */

/* Eroe del giorno zero */
.zero-hero { text-align: left; }
.zh-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-deep); margin: 0 0 6px; }
.zh-title { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.zh-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }
.zh-cta { width: 100%; }
.zh-alt { display: block; margin: 10px auto 0; font-size: 13px; }

/* Cose da seguire */
.follow-head { display: flex; align-items: center; gap: 6px; }
.follow-star { color: var(--accent); font-size: 15px; }
.follow-list { display: flex; flex-direction: column; }
.follow-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line, #EFE9EC); cursor: pointer; }
.follow-row:last-child { border-bottom: none; }
.follow-check { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.follow-icon { flex: none; }
.follow-body { flex: 1; min-width: 0; }
.fr-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.fr-when { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.fr-rel.amber { color: #A1712B; font-weight: 700; }
.fr-rel.blue { color: #67849F; font-weight: 600; }
.fr-origin { font-size: 12px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }
.fr-plan { flex: none; padding: 6px 10px; font-size: 12.5px; align-self: center; }
.follow-all { max-height: 80vh; overflow-y: auto; }
.follow-all-list { margin-top: 8px; }

/* Chiedi a Serena */
.ask-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.ask-input-row { display: flex; align-items: center; gap: 8px; }
.ask-input-row input { flex: 1; border: 1px solid var(--line, #EFE9EC); border-radius: 999px; padding: 10px 14px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface, #fff); cursor: pointer; }
.ask-input-row input:focus { outline: none; border-color: var(--accent); }
.ask-mic { flex: none; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-chip { border: 1px solid var(--line, #EFE9EC); background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ask-chip:hover { border-color: var(--accent); }

/* Card ricordo (anniversario) */
.anniv-card { display: block; width: 100%; text-align: left; border: none; font-family: inherit; cursor: pointer; }
.ac-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-deep); margin: 0 0 6px; }
.ac-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.ac-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

/* Chip di partenza in chat (SRD-026 §4.2) — stesso stile dei chip Home */
.chat-start-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 8px; }

/* Ricordi (SRD-026 §4.3): "Il diario di chi" primario + filtri ripiegati */
.diary-who-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.diary-who-btn { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line, #E9E5E0); background: var(--surface, #fff); border-radius: 14px; padding: 11px 14px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.diary-who-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-deep); stroke-width: 1.8; flex: none; }
.diary-who-btn .dw-caret { margin-left: auto; transform: rotate(90deg); stroke: var(--ink-soft); }
.diary-who-btn:hover { border-color: var(--accent); }

/* Testata COMPATTA dei Ricordi (17 lug sera): il diario subito in vista.
   Titolo + toggle mini sulla stessa riga; sotto una sola riga di comandi
   leggeri ("Il diario di" pesa quanto "Filtri", la lente apre la ricerca).
   Le regole .diary-who-* qui sopra restano riattivabili. */
/* .mem-head non esiste più: conteneva titolo e selettore, e hanno traslocato
   entrambi — il titolo nella testata, il selettore sulla riga dei comandi. */
.memory-mode.mini { flex: none; margin: 0; padding: 3px; box-shadow: none; }
.memory-mode.mini .mm-btn { flex: none; padding: 6px 11px; font-size: 12px; gap: 5px; }
.memory-mode.mini .mm-btn svg { width: 13px; height: 13px; }
.mem-toolbar { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; }
.mem-tool { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mem-tool > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-tool svg { fill: none; stroke: currentColor; }
.mem-tool .mt-caret { width: 12px; height: 12px; flex: none; stroke-width: 2; transform: rotate(90deg); }
.mem-tool-icon { margin-left: auto; }
/* Selettore Diario|Timeline a SOLE ICONE, sulla riga dei comandi.
   Con le parole misurava 171,7px — metà riga da solo — e i quattro elementi
   non ci stavano: flexbox non li sovrapponeva, li TRONCAVA («Il diario di:
   Tutti» in ellissi, «Filtri» tagliato, lente schiacciata da 17 a 12,5px).
   A sole icone sono 74px: -97,7px, e i quattro elementi entrano alla loro
   larghezza naturale con 104px di spazio per i gap (ne servono 48).
   Le parole NON spariscono: restano per i lettori di schermo. */
/* Il selettore porta le sue PAROLE: «Diario» e «Timeline» si leggono, non si
   indovinano. Il bersaglio è alto 25px, sotto la soglia §10: l'area di tocco
   sale a 44px in verticale con uno pseudo-elemento, come le icone-azione della
   Home, senza toccare la geometria visibile. */
.memory-mode.mini .mm-btn { position: relative; }
.memory-mode.mini .mm-btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* I quattro elementi della riga: «Il diario di: Tutti» 112,1 · «Filtri» 27,9 ·
   selettore 135,7 · lente 17 = 292,7px di contenuto su 335 di riga. Coi gap da
   16 servirebbero 340,7 e flexbox TRONCHEREBBE le etichette (è già successo):
   a 12px ne bastano 328,7, con 6,3 di margine e tutto a larghezza naturale.
   Sotto i 375px si stringe ancora, e sotto i 360 la riga va a capo invece di
   tagliare: si sacrifica una riga, mai una parola. */
/* DUE GRUPPI, non quattro elementi in fila: a sinistra «Il diario di» e
   «Filtri» (che scelgono COSA vedere), a destra il selettore e la lente (che
   scelgono COME vederlo). Il vuoto che avanza sta in mezzo ai due gruppi, non
   fra selettore e lente: l'ancoraggio a destra passa dal selettore, e la lente
   gli sta a fianco. Col gap a 8 il vuoto centrale è 18,3px contro gli 8 interni
   ai gruppi — abbastanza perché l'occhio li legga come due blocchi. */
.mem-toolbar { gap: 8px; }
.mem-toolbar .memory-mode.mini { margin-left: auto; }
.mem-toolbar .memory-mode.mini + .mem-tool-icon { margin-left: 0; }
@media (max-width: 359px) { .mem-toolbar { flex-wrap: wrap; row-gap: 10px; } }
.mem-tool-icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
.mem-search-row { margin-bottom: 12px; }
.diary-filters-btn { flex: none; }

/* Impostazioni in 5 famiglie (SRD-026 §4.4): gruppi + sottotendine */
.settings-group > summary { font-size: 15.5px; font-weight: 700; color: var(--accent-deep); }
.settings-group > .settings-acc-body { padding-left: 2px; }
.settings-acc.settings-sub { margin: 6px 0 6px 10px; border-left: 2px solid var(--accent-soft); padding-left: 10px; }
.settings-acc.settings-sub > summary { font-size: 13.5px; font-weight: 600; }

/* Informazioni essenziali (SRD-026 §4.8): interruttori 👥/🔒 sotto "Avanzate" */
.he-advanced { margin-top: 12px; border-top: 1px solid var(--line, #E9E5E0); padding-top: 8px; }
.he-advanced > summary { font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 6px 0; }
.he-adv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.he-adv-label { font-size: 12.5px; color: var(--ink); }
.he-adv-toggle { flex: none; font-size: 12px; padding: 6px 10px; }
.wb-later { display: block; margin: 6px auto 0; }

/* ===== HOME NUOVA (flag HOME_NEXT — SERENA_HOME_SPECIFICA, Tranche 1) ===== */

/* ===== RESTYLING — FRONTE GRAFICA (flag HOME_SKIN, 24 lug) =====
   TUTTE le regole visive stanno annidate sotto :root[data-home-skin="new"]:
   a flag spento la Home resta identica, ad acceso cambia solo l'aspetto.
   Approvate dal presidente voce per voce.

   A1 — la colonna sinistra NON è più impilata: la pastiglia di tipo e il
   contrassegno (orario per "Oggi", badge del giorno per "In arrivo") stanno
   AFFIANCATI, come nel mockup. L'orario è grande, in accento, su una riga; le
   etichette ("Entro oggi"…) vanno a capo per PAROLE nella colonna.
   A2 — la pastiglia di tipo è un QUADRATO arrotondato piccolo: la forma la
   distingue dalla casella "fatto" (tonda, interattiva) e accorcia la riga.
   B2 — il divisore è più tenue del token --line (nessuna riga più alta).  */
/* Divisori (26 lug, decisione del presidente): il token standard dell'app
   --line #ECE3D9, uguale in TUTTI i blocchi della Home nuova (Oggi, In arrivo,
   Cosa è cambiato). Il precedente --bg-deep #F3ECE3 dava 1,17:1 su bianco: una
   linea che nel DOM c'era ma a schermo non si vedeva. #ECE3D9 resta un hairline
   discreto (1,27:1) ma percepibile. A skin spento non cambia nulla: la regola
   base usa già --line. */
:root[data-home-skin="new"] .hn-row { align-items: flex-start; gap: 10px; border-bottom-color: var(--line); padding-top: 8px; padding-bottom: 8px; }
/* A1 — CTA più compatta sotto la skin: sulle righe ricche (P0 terapie) la colonna
   sinistra restringe il corpo, e una CTA piena a 375px lo schiaccerebbe su troppe
   righe. Con la CTA compatta resta in linea e la riga non esplode in altezza. */
:root[data-home-skin="new"] .hn-cta { padding: 6px 12px; font-size: 12.5px; }
:root[data-home-skin="new"] .hn-lead { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; padding-top: 1px; }
:root[data-home-skin="new"] .hn-kind-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: #7A4A59; display: flex; align-items: center; justify-content: center; flex: none; }
:root[data-home-skin="new"] .hn-kind-ico svg { width: 16px; height: 16px; stroke-width: 1.85; }
/* A2 — la casella "fatto" è TONDA. #2 (24 lug): il CERCHIO è più piccolo (20px) e
   porta una spunta TENUE all'interno (comunica «si può toccare»). Il BERSAGLIO
   resta 44×44 (§10, non negoziabile): l'input è 44px, il margine negativo lo
   riporta al footprint 28px della pastiglia (allineamento titoli invariato), il
   cerchio visivo è disegnato in ::before centrato. Spento: cerchio + spunta tenue
   accento. Acceso: cerchio pieno + spunta bianca. */
:root[data-home-skin="new"] .hn-lead .hn-check {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; margin: -8px; flex: none; cursor: pointer; position: relative;
  border: none; background: transparent; border-radius: 0;
}
:root[data-home-skin="new"] .hn-lead .hn-check::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface);
}
:root[data-home-skin="new"] .hn-lead .hn-check::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4.5px; height: 8.5px; border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg); opacity: .32;
}
:root[data-home-skin="new"] .hn-lead .hn-check:checked::before { background: var(--accent); border-color: var(--accent); }
:root[data-home-skin="new"] .hn-lead .hn-check:checked::after { border-color: #fff; opacity: 1; }
:root[data-home-skin="new"] .hn-lead .hn-check:focus-visible { outline: none; }
:root[data-home-skin="new"] .hn-lead .hn-check:focus-visible::before { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
/* A1 — "Oggi": orario 14px semibold accento su UNA riga. #5 via B (24 lug): la
   colonna è FISSA a 44px e tiene i SOLI orari («08:00», 41px); le etichette-parola
   («Questa settimana», «Entro oggi»…) NON stanno più qui — vanno a occhiello sopra
   il titolo (vedi il grid di "Oggi" più sotto). Prima era 68px per far stare
   «settimana» (67px): quella larghezza la pagavano anche le righe con solo l'orario.
   Ora +24px di titolo su ogni riga, con i titoli allineati. */
:root[data-home-skin="new"] .hn-lead-num { width: 44px; font-size: 14px; font-weight: 600; color: var(--accent-deep); text-align: left; line-height: 1.15; letter-spacing: 0; white-space: normal; overflow-wrap: normal; hyphens: none; }
/* A1 — "In arrivo": il contrassegno è il BADGE del giorno, un quadretto neutro
   con il numero centrato (nessuna pastiglia di tipo accanto). */
:root[data-home-skin="new"] .hn-event .hn-lead-num { width: auto; min-width: 30px; height: 30px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); color: var(--ink); border-radius: 8px; font-size: 13px; font-weight: 700; }
/* A1 — il titolo della riga è semibold (nel mockup è in grassetto): dà gerarchia
   rispetto al contesto. Interlinea 1,25 (leva #8: -0,1 su 1,35) per compattare i
   titoli multi-riga senza scendere di corpo. */
:root[data-home-skin="new"] .hn-title { font-weight: 600; line-height: 1.25; }
/* Sotto la colonna, il corpo non ripete l'orario (è passato nella colonna):
   l'occhiello vuoto non deve lasciare spazio morto sopra il titolo. */
:root[data-home-skin="new"] .hn-row .hn-top:empty,
:root[data-home-skin="new"] .hn-row .hn-top .hn-time:empty { margin: 0; }
/* A4 — ambra terracotta al posto dell'oliva #856A1E: ≥4.5:1 su bianco e
   distinguibile a colpo d'occhio da danger e accent (solo skin). */
:root[data-home-skin="new"] .hn-urg-soon .hn-evt-day { color: #A85834; }
:root[data-home-skin="new"] .hf-attn .hf-status-txt { color: #A85834; }
:root[data-home-skin="new"] .hf-attn .hf-dot { background: #A85834; }
/* #2+#3 - card Famiglia: 2 card per vista a larghezza relativa (mai una card
   parziale, zero tagli a meta parola); indicatore a puntini (niente dissolvenza). */
:root[data-home-skin="new"] .hf-scroller { -webkit-mask-image: none; mask-image: none; }
/* #2 avatar adattivo (25 lug, decisione del presidente) — TUTTE le card sono
   media-object (cerchio a SINISTRA, nome/stato a destra): struttura unica, card
   compatte (l'altezza la detta il testo, ~224px). Cambia SOLO la DIMENSIONE del
   cerchio: 44px con foto (un volto si riconosce), 26px con la sola iniziale (di
   base, .avatar-dot). Finding del 25 lug: il layout a colonna (avatar SOPRA) era
   più ALTO (+17px), non più compatto → media-object anche per le iniziali, solo
   cerchio più piccolo. .hf-card--photo la mette renderHomeFamily quando l'avatar
   non è .is-initials. A flag spento la card resta base. */
:root[data-home-skin="new"] .hf-card { width: auto; flex: 0 0 calc((100% - 10px) / 2); flex-direction: row; flex-wrap: nowrap; align-items: center; }
:root[data-home-skin="new"] .hf-card .hf-avatar { flex: none; align-self: center; margin: 0 10px 0 0; }
:root[data-home-skin="new"] .hf-card .hf-text { flex: 1; min-width: 0; align-self: center; }
:root[data-home-skin="new"] .hf-card--photo .hf-avatar { width: 44px; height: 44px; }
/* B1 — pastiglia-persona a TINTA UNICA del marchio (mai per-persona: un colore
   per nome verrebbe letto come segnale). Testo mauve scuro per il 4.5:1. */
:root[data-home-skin="new"] .hn-person { background: var(--accent-soft); color: #854F60; }
/* A3 — icona di blocco a fianco del titolo (linea, accento, ≈ altezza del
   titolo). Inline: non tocca il display dell'h2, i titoli legacy restano intatti. */
:root[data-home-skin="new"] .card-title > .hn-hi { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; color: var(--accent-deep); }
/* Filo cronologico in "Cosa è cambiato" (dal mockup): linea verticale sottile a
   sinistra con un puntino per riga. Tutto in pseudo-elementi → DECORATIVO e fuori
   dall'albero accessibile per costruzione (niente markup, niente aria); cliccabile
   resta la riga intera. Il gutter a sinistra fa spazio al filo. */
:root[data-home-skin="new"] #homeChangesBody { position: relative; padding-left: 16px; }
/* #4 (24 lug) — icona di riga CENTRATA sull'altezza della riga (dal mockup):
   in "Cosa è cambiato" e "In arrivo" la pastiglia/badge non resta ancorata in
   cima quando il titolo va su più righe (prima appariva scollegata dal testo).
   "Oggi" NON è toccato: lì la colonna dell'orario deve restare in alto,
   allineata alla PRIMA riga del titolo (08:00 accanto al titolo). */
:root[data-home-skin="new"] #homeChangesBody .hn-row,
:root[data-home-skin="new"] #homeUpcomingBody .hn-row { align-items: center; }
/* «In arrivo»: nessuna linea sotto l'ULTIMA riga, come in «Oggi» e «Cosa è
   cambiato». Qui `:last-child` non la agganciava, perché dopo le righe c'è il
   rigo di chiusura «E un altro impegno in settimana»: le righe sono gli unici
   DIV del blocco, quindi `:last-of-type` centra la riga giusta. Finché il
   divisore era #F3ECE3 la linea non si vedeva; con #ECE3D9 sì. */
:root[data-home-skin="new"] #homeUpcomingBody .hn-row:last-of-type { border-bottom: none; }
:root[data-home-skin="new"] #homeChangesBody .hn-row { position: relative; }
/* Filo: il puntino è centrato come la pastiglia; la linea verticale è fatta di
   SEGMENTI per-riga (::after) invece di una linea sola con top/bottom fissi —
   così parte dal primo puntino e finisce all'ultimo con QUALUNQUE altezza di
   riga (con l'icona centrata, la vecchia linea a 22px avrebbe sporto sopra il
   primo e sotto l'ultimo). Con una sola riga i segmenti si annullano (solo il
   puntino). Tutto in pseudo-elementi → resta DECORATIVO e fuori dall'a11y. */
:root[data-home-skin="new"] #homeChangesBody .hn-row::before { content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); z-index: 1; }
:root[data-home-skin="new"] #homeChangesBody .hn-row::after { content: ''; position: absolute; left: -11px; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: 0; }
:root[data-home-skin="new"] #homeChangesBody .hn-row:first-child::after { top: 50%; }
:root[data-home-skin="new"] #homeChangesBody .hn-row:last-child::after { bottom: 50%; }
/* #2 (Cosa e cambiato): titolo e fonte scorrono come UN testo unico, separati
   da un trattino; la fonte prosegue accanto al titolo e va a capo solo se serve
   (§4.5: la fonte resta sempre). Titolo grassetto, fonte in tono secondario. */
:root[data-home-skin="new"] #homeChangesBody .hn-title { display: inline; }
:root[data-home-skin="new"] #homeChangesBody .hn-context { display: inline; margin: 0; }
:root[data-home-skin="new"] #homeChangesBody .hn-context:not([hidden])::before { content: " — "; }

/* #2b - la data relativa va a DESTRA (mockup): float right, cosi il testo
   (titolo/fonte) le scorre accanto sulla prima riga e va a capo sotto,
   recuperando la riga che occupava. display:contents su .hn-top promuove data
   e persona nel corpo (persona inline col testo). Data in tono secondario. */
:root[data-home-skin="new"] #homeChangesBody .hn-top { display: contents; }
:root[data-home-skin="new"] #homeChangesBody .hn-time { float: right; margin: 0 0 0 8px; color: var(--ink-soft-strong); font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Card Memoria (dal mockup): compatta, con MINIATURA piccola a destra invece
   della foto a tutta larghezza; e riposizionata DOPO "Serena suggerisce". Il
   riordino è gated — #homeLegacy diventa flex SOLO a skin accesa, così a flag
   spento ordine e layout restano identici (le card usano solo margin-bottom,
   quindi flex-column dà la stessa spaziatura del blocco). */
:root[data-home-skin="new"] #homeLegacy { display: flex; flex-direction: column; }
:root[data-home-skin="new"] #homeMemoryCard { order: 5; position: relative; }
/* #4 (25 lug, fedeltà al mockup): la foto-ricordo è ORIZZONTALE 72×52 (nel
   mockup è un rettangolo ~1,4:1, non un quadrato). In assoluto e centrata: NON
   alza la card (78px, altezza dettata dal testo; la foto ha ~13px di margine). */
:root[data-home-skin="new"] #homeMemoryCard .hm-photo { width: 72px; height: 52px; max-height: none; border-radius: 12px; margin: 4px 0 0; }
:root[data-home-skin="new"] #homeMemoryCard:has(.hm-photo:not([hidden])) { padding-right: 98px; }  /* 16 offset + 72 foto + 10 gap */
:root[data-home-skin="new"] #homeMemoryCard:has(.hm-photo:not([hidden])) .hm-photo { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }
/* Leva #8 (approvate a rischio basso): card della Home più compatte — padding
   13→11, margine tra card 10→8. Scoped a #view-oggi per non toccare altre viste. */
:root[data-home-skin="new"] #view-oggi .card { padding: 11px; margin-bottom: 8px; }
/* "Oggi" — strada del mockup (24 lug, sostituisce via-B). L'etichetta
   temporale (orario o parola) vive nella COLONNA sinistra accanto alla
   pastiglia e va a capo PER PAROLE; niente occhiello: .hn-time nascosto a skin
   acceso. La pastiglia (o la casella "fatto") è CENTRATA sul blocco
   titolo+contesto, ANCHE sulle righe con CTA (chiude il difetto della pastiglia
   troppo in alto). display:contents su .hn-top: titolo + persona IN LINEA
   (riga 1), contesto sotto (riga 2), per tutte le righe, CTA comprese. */
/* RIDISEGNO 26 lug — STESSO ASSE per tutte le righe: la colonna (pastiglia +
   etichetta) si allinea in ALTO col titolo, non più centrata sul corpo. Prima,
   su un titolo a due righe, pastiglia ed etichetta scivolavano accanto alla
   SECONDA riga (pastiglia a 12,2px sulla terapia contro 21px sugli esami).
   Vale in Home e nell'overlay «Le attività di oggi» (.hn-all-list). */
:root[data-home-skin="new"] #homeTodayBody .hn-row,
:root[data-home-skin="new"] .hn-all-list .hn-row { align-items: flex-start; }
/* La COLONNA intera va in alto (align-self) e il contrassegno si ancora all'asse
   del titolo. L'etichetta resta CENTRATA sulla pastiglia quando sta su una riga
   (scelta #2a del 25 lug): min-height 28px + centratura verticale; se va a capo
   su due righe cresce verso il basso, senza spostare il contrassegno. Così
   l'asse pastiglia/titolo è lo STESSO su tutte le righe, con etichette a una o
   due righe. */
:root[data-home-skin="new"] #homeTodayBody .hn-lead,
:root[data-home-skin="new"] .hn-all-list .hn-lead { align-self: flex-start; align-items: flex-start; padding-top: 0; }
:root[data-home-skin="new"] #homeTodayBody .hn-lead .hn-kind-ico,
:root[data-home-skin="new"] .hn-all-list .hn-lead .hn-kind-ico { align-self: flex-start; }
:root[data-home-skin="new"] #homeTodayBody .hn-lead-num,
:root[data-home-skin="new"] .hn-all-list .hn-lead-num { min-height: 28px; display: flex; flex-direction: column; justify-content: center; }
/* (La vecchia regola .hn-cta { align-self: center } è stata rimossa: con il
   C-stack il pulsante vive nel piede a colonna e deve allinearsi a DESTRA come
   il chip — align-items:flex-end del piede; il center la centrava, spezzando
   l'allineamento a destra.) */
/* Colonna dell'etichetta (26 lug): le etichette a due parole vanno a capo PER
   PAROLE e sono CENTRATE una sull'altra («Entro» sopra «oggi», «Questa» sopra
   «settimana»), testo centrato orizzontalmente nella colonna. Larghezza 68px =
   la parola più lunga, "settimana" (66,7px), che così non si spezza mai
   (overflow-wrap resta OFF); sotto i 69px «Entro oggi» va a capo come voluto.
   Stessa misura in Home e nell'overlay, che usava i 44px di default e lasciava
   sbordare "sospeso" (57,1px) di 13px. */
:root[data-home-skin="new"] #homeTodayBody .hn-lead-num,
:root[data-home-skin="new"] .hn-all-list .hn-lead-num { width: 68px; text-align: center; }
/* (26 lug, decisione del presidente) Icone delle pastiglie tutte a 16px: la
   riduzione a 12px di «Oggi» (#2b del 25 lug) è ANNULLATA, così «Oggi» e «Cosa
   è cambiato» hanno lo stesso simbolo. La pastiglia resta 28px: dentro, 16px di
   glifo lasciano 6px di rosa per lato, quindi l'icona non tocca i bordi. Vale
   la regola generale più sopra (.hn-kind-ico svg): qui non serve più nulla. */
:root[data-home-skin="new"] #homeTodayBody .hn-body { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start; }
:root[data-home-skin="new"] #homeTodayBody .hn-top { display: contents; }
:root[data-home-skin="new"] #homeTodayBody .hn-time { display: none; }
:root[data-home-skin="new"] #homeTodayBody .hn-title { grid-column: 1; grid-row: 1; }
:root[data-home-skin="new"] #homeTodayBody .hn-person { grid-column: 2; grid-row: 1; justify-self: end; }
:root[data-home-skin="new"] #homeTodayBody .hn-context { grid-column: 1 / -1; grid-row: 2; }

/* RIDISEGNO 26 lug (decisione del presidente) — AZIONE = UNA ICONA TONDA, sempre
   nello stesso punto. I pulsanti testuali dentro la riga («Crea mail», «Rivedi»,
   «Prepara») sono stati la causa di vuoti e disallineamenti: larghi 55-95px,
   costringevano il piede sotto il corpo e cambiavano la geometria riga per riga.
   Ora la struttura è FISSA — [pastiglia][etichetta][titolo+contesto][icona] — e
   lo slot dell'icona esiste anche quando la riga non ha azione (resta vuoto),
   così tutte le righe hanno la stessa geometria. Niente più .hn-toprow/.hn-foot.
   L'icona è ancorata IN ALTO, sull'asse del titolo (align-self:flex-start). */
:root[data-home-skin="new"] .hn-act { flex: none; width: 28px; align-self: flex-start; display: flex; justify-content: flex-end; }
:root[data-home-skin="new"] .hn-act-btn { position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
:root[data-home-skin="new"] .hn-act-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-home-skin="new"] .hn-act-btn:active { background: var(--bg-deep); }
/* §10 — bersaglio ≥44×44 senza ingrandire il cerchio: area trasparente 28+8+8. */
:root[data-home-skin="new"] .hn-act-btn::before { content: ''; position: absolute; inset: -8px; }
:root[data-home-skin="new"] .hn-act-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
/* Il chip persona vive nel CONTESTO, in linea dopo la data; se non entra va a
   capo SOTTO, allineato a sinistra (mai a destra sotto l'icona). */
:root[data-home-skin="new"] #homeTodayBody .hn-context,
:root[data-home-skin="new"] .hn-all-list .hn-context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* §10 — contrasto: sulle superfici della Home nuova il testo secondario usa
   un grigio più scuro del token globale --ink-soft (#8B7E8D, 3.84:1 su bianco:
   sotto la soglia AA di 4.5 per i corpi piccoli). Variabile locale: il token
   globale resta invariato per il resto dell'app. */
:root { --ink-soft-strong: #6B6270; }  /* 5.8:1 su bianco */
.hn-list { display: flex; flex-direction: column; }
.hn-hi { display: none; }  /* A3: l'icona di blocco compare SOLO a skin acceso (vedi regola annidata) */
.hn-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hn-row:last-child { border-bottom: none; padding-bottom: 2px; }
.hn-check { width: 20px; height: 20px; accent-color: var(--accent); flex: none; cursor: pointer; }
.hn-body { flex: 1; min-width: 0; }
.hn-clickable { cursor: pointer; }
.hn-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.hn-time { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); }
.hn-person { font-size: 11.5px; font-weight: 600; color: #5C5361; background: var(--bg-deep); border-radius: 999px; padding: 1px 8px; }  /* 6.2:1 su beige */
.hn-title { font-size: 14px; color: var(--ink); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hn-context { font-size: 12.5px; color: var(--ink-soft-strong); margin-top: 1px; }
.hn-cta { flex: none; padding: 8px 14px; font-size: 13px; }
.hn-more { display: block; margin-top: 8px; }
.hn-empty-main { font-size: 14px; color: var(--ink); margin: 2px 0 4px; }
.hn-empty-sub { font-size: 13px; color: var(--ink-soft-strong); margin: 0; }

/* §4.3 "In arrivo" — riga compatta da smartphone (direttiva 24 lug): giorno e
   ora AFFIANCATI sulla prima linea, mai incolonnati. Colore SOLO sulla
   prossimità della data, mai sulle persone. */
.hn-event { cursor: pointer; }
.hn-evt-when { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.hn-evt-day { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hn-urg-now .hn-evt-day { color: var(--danger); }        /* 4.9:1 su bianco */
.hn-urg-soon .hn-evt-day { color: #856A1E; }             /* ambra scura: 5.2:1 (var(--warn) dava 4.0) */
.hn-evt-time { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hn-event .hn-top { flex-wrap: wrap; row-gap: 2px; }
.hn-event .p-chevron { flex: none; width: 16px; height: 16px; color: var(--ink-soft-strong); }
.hn-upcoming-more { font-size: 12.5px; color: var(--accent-deep); font-weight: 600; margin: 8px 0 0; cursor: pointer; }

/* §4.4 "Famiglia" — stati umani e spiegabili; testo+segno, mai solo colore.
   §10 + direttiva 24 lug: card in SCORRIMENTO ORIZZONTALE con indicatore.
   Correzione 24 lug (2b): snap MANDATORY + DISSOLVENZA sui bordi — la card che
   sbircia sfuma invece di essere tagliata di netto a metà parola. I margini di
   dissolvenza (--fade-l/--fade-r) sono 0 di default (nessun fade) e vengono
   accesi dal JS solo dal lato dove c'è ancora contenuto da scorrere. */
.hf-scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 2px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); }
.hf-scroller::-webkit-scrollbar { display: none; }
.hf-card { flex: 0 0 auto; width: 140px; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; }
.hf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-self: stretch; }
.hf-card .hf-avatar { margin-bottom: 4px; }
.hf-age { font-size: 11.5px; color: var(--ink-soft-strong); }
.hf-why { font-size: 11.5px; color: var(--ink-soft-strong); line-height: 1.3; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hf-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.hf-dot-ind { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: background .2s; }
.hf-dot-ind.is-on { background: var(--accent); }
.hf-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.hf-status { display: flex; align-items: flex-start; gap: 6px; margin-top: 1px; width: 100%; }
.hf-status .hf-dot { margin-top: 5px; }
.hf-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.hf-status-txt { font-size: 12.5px; font-weight: 600; min-width: 0; overflow-wrap: break-word; }
/* Il segno (pallino) tiene il colore tenue della tavolozza; il TESTO usa la
   variante scura, così lo stato resta leggibile (§10: mai testo tenue su
   fondi chiari). Tutti ≥ 5:1 su bianco. */
.hf-ok .hf-dot { background: var(--good); } .hf-ok .hf-status-txt { color: #457A45; }
.hf-attn .hf-dot { background: var(--warn); } .hf-attn .hf-status-txt { color: #856A1E; }
.hf-active .hf-dot { background: #8B7BB8; } .hf-active .hf-status-txt { color: var(--violet-deep); }
.hf-incomplete .hf-dot { background: var(--ink-soft); } .hf-incomplete .hf-status-txt { color: var(--ink-soft-strong); }
.hf-row .p-chevron { flex: none; width: 16px; height: 16px; color: var(--ink-soft-strong); }

.hf-essentials { display: block; margin-top: 8px; font-size: 12.5px; }
.mh-journey { font-size: 12px; color: var(--ink-soft); margin: 2px 0 2px; }

/* Documenti da confermare (fascicolo adulti): chip + Conferma/Correggi */
.doc-unconfirmed-acts { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; flex-wrap: wrap; }
.doc-unconfirmed-acts .btn-ghost { padding: 5px 12px; font-size: 12.5px; }

/* §5 Home del nuovo utente — promessa e tre passi, una sola CTA primaria */
.hn-onboard .ho-title { font-size: 18px; margin: 2px 0 4px; }
.hn-onboard .ho-text { font-size: 13.5px; color: var(--ink); margin: 0 0 4px; }
.ho-promise { margin: 8px 0 2px; }
.ho-promise-head { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.ho-promise ul { margin: 0; padding-left: 18px; }
.ho-promise li { font-size: 12.5px; color: var(--ink-soft-strong); margin: 2px 0; }
.ho-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ho-step { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ho-step-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.ho-step-sub { font-size: 12.5px; color: var(--ink-soft-strong); }
/* CTA primaria: il fondo va dichiarato QUI — .ho-step viene dopo .btn-primary
   nel foglio e a parità di specificità vinceva il beige, lasciando il testo
   bianco illeggibile (1.15:1). Con il fondo accento: 5.0:1. */
.ho-step-primary { border: none; background: var(--accent-deep); }
.ho-step-primary .ho-step-label, .ho-step-primary .ho-step-sub { color: #fff; }

/* §4.5 "Memoria" — un solo modulo, foto se il ricordo ce l'ha */
.hm-photo { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin: 6px 0; }

/* §4.5 "Prevenzione" — sintesi familiare (mai il singolo esame in card) */
.hn-prev-line { font-size: 14px; color: var(--ink); margin: 2px 0 2px; }
.hn-prev-people { font-size: 12.5px; color: var(--ink-soft-strong); margin: 0; }
.hn-prevention-overlay .hn-prev-note { font-size: 12.5px; color: var(--ink-soft-strong); margin: -4px 0 10px; }
.hn-prevention-overlay .ct-row:first-child { border-top: none; }

/* ============================================================
   LA CASELLA DI SPUNTA DI SERENA — una regola sola, per tutta l'app
   ------------------------------------------------------------
   Prima esistevano due caselle tonde (la card promemoria, e «Oggi» ma solo
   sotto data-home-skin="new") e in TUTTE le altre quindici schermate restava
   la casella quadrata di sistema, colorata al più con accent-color. Qui la
   forma tonda diventa lo standard: FUORI dal flag grafico, perché una regola
   di base non può vivere dietro un interruttore sperimentale (decisione del
   presidente, 28 lug).
   Forma presa da .tc-box (tondo 22px, spunta bianca su accento). Bersaglio
   preso da .hn-check: l'input misura 44×44 (§10, non negoziabile) e il margine
   negativo lo riporta al footprint di 22px, così nessun testo si sposta.
   Le regole locali che imponevano width/height/accent-color sono state tolte:
   erano quindici correzioni locali mancate, non quindici scelte.
   ============================================================ */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; padding: 0; margin: 0; flex: none;
  box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
  cursor: pointer; position: relative;
  transition: background .15s ease, border-color .15s ease;
}
/* IL BERSAGLIO STA SULLA RIGA, non sulla casella (§10, misurato il 28 lug).
   Gonfiare l'input a 44px produceva 28 coppie di bersagli SOVRAPPOSTI, perché
   quattordici righe dell'app sono alte 40-43px: due aree da 44 non ci stanno
   senza pestarsi, e sul confine si sarebbe spuntata la voce sbagliata. Quasi
   tutte le caselle vivono dentro un <label> che copre l'intera riga — è QUELLO
   che il dito tocca. Portando la riga a 44px il bersaglio è conforme, largo
   quanto la schermata, e nessuna area invade quella accanto. */
label:has(> input[type="checkbox"]) { min-height: 44px; }
input[type="checkbox"]::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 9.5px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg); opacity: 0;
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { opacity: 1; }
input[type="checkbox"]:disabled { cursor: default; background: var(--bg-deep); border-color: var(--line); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
/* Le poche caselle che NON vivono dentro una riga-etichetta si portano il
   bersaglio addosso: 44×44 con il margine negativo che lo riporta al footprint
   di 22px, così nessun testo si sposta. È il modello di .hn-check, qui fuori dal
   flag grafico perché «Oggi» deve essere conforme anche a skin spento. */
.hn-row .hn-check, .auth-terms input[type="checkbox"] {
  width: 44px; height: 44px; margin: -11px; border: none; background: none; border-radius: 0;
}
.hn-row .hn-check::before, .auth-terms input[type="checkbox"]::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
}
.hn-row .hn-check:checked::before, .auth-terms input[type="checkbox"]:checked::before { background: var(--accent); border-color: var(--accent); }
.hn-row .hn-check:checked, .auth-terms input[type="checkbox"]:checked { background: none; }
/* La casella della card promemoria era tonda ma con bersaglio 22px: fuori norma
   §10 quanto le altre. L'input lì è nascosto e il cerchio lo disegna .tc-box —
   il bersaglio si allarga sullo pseudo-elemento libero, senza toccare la forma. */
.todo-card .tc-box::before { content: ''; position: absolute; left: -11px; right: -11px; top: -11px; bottom: -11px; }

/* ============================================================
   CIÒ CHE STA ANCORATO IN ALTO NON DEVE FINIRE SOTTO NIENTE
   ------------------------------------------------------------
   Due cause distinte, scoperte insieme il 28 luglio.
   1) La barra d'ambiente (#serena-env-bar) è fixed a top:0 con z-index massimo,
      e la classe `has-serena-env-bar` che il codice metteva sul body NON era
      collegata a nessuna regola: la barra copriva la testata delle schermate a
      pagina intera — cioè il tasto «Indietro» (l'unica uscita) e «Salva».
   2) `viewport-fit=cover` è attivo e in tutto il foglio non esisteva un solo
      env(safe-area-inset-top): su un telefono col notch la stessa testata
      finisce sotto la barra di stato ANCHE IN PRODUZIONE, dove la barra
      d'ambiente non c'è. È il difetto che tocca gli utenti veri.
   L'altezza della barra la misura e la pubblica supabaseConfig.js (--env-bar-h):
   non è un numero fisso perché la barra va a capo sugli schermi stretti.
   ============================================================ */
:root { --env-bar-h: 0px; }
.cal-editor, .note-editor { top: calc(env(safe-area-inset-top, 0px) + var(--env-bar-h)); }

/* ============================================================
   SCELTA FRA PERSONE — la pastiglia INTERA è il pulsante
   ------------------------------------------------------------
   «Per chi» e «Di quali bambini si occupa» sono scelte fra persone: usano il
   linguaggio delle pastiglie già presente nell'app, senza il cerchietto dentro.
   Da spenta: bianca, bordo leggero, nome scuro. Da scelta: piena, nome chiaro.
   §10 — lo stato NON può dipendere dal solo colore: la pastiglia scelta porta
   una SPUNTA prima del nome, e lo spazio della spunta è riservato SEMPRE (da
   spenta è invisibile) così la riga non si ricompone sotto il dito al tocco.
   Il fondo è --accent-deep, non --accent: con testo bianco dà 4,98:1 (AA), dove
   --accent si fermerebbe a 3,2:1 su un testo di 12,5px.
   NON tocca i due sì/no del modulo referto («Serve la ricetta», «Contenuto
   verificato»): quelli sono interruttori, non scelte fra persone (decisione del
   presidente) — e restano con la casella tonda.
   ============================================================ */
/* Il nome è CENTRATO in tutte le pastiglie, scelte e non. Riservare lo spazio
   della spunta dentro il flusso lo spingeva a destra su quelle spente: qui la
   spunta esce dal flusso (assoluta) e vive dentro un padding SIMMETRICO, così il
   testo è centrato in entrambi gli stati e la larghezza non cambia mai — nessun
   salto sotto il dito, che era il vincolo. Scartata la crescita alla selezione:
   le pastiglie vanno a capo, e 19px in più possono spingere la successiva su
   un'altra riga proprio mentre la si tocca. */
.member-check.person-pill {
  position: relative; justify-content: center; gap: 0;
  padding: 7px 22px;              /* 22 = 13 della spunta + 9 di respiro, su ENTRAMBI i lati */
}
.member-check.person-pill input[type="checkbox"] {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; margin: 0; flex: none;
  border: none; background: none; border-radius: 0; cursor: pointer;
}
.member-check.person-pill input[type="checkbox"]::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4.5px; height: 8.5px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg); opacity: 0;   /* spazio riservato, segno invisibile */
}
.member-check.person-pill input[type="checkbox"]:checked { background: none; border: none; }
.member-check.person-pill input[type="checkbox"]:checked::after { opacity: 1; }
.member-check.person-pill:has(input:checked) {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}

/* ===== EDIZIONE GESTIONALE (Fase 1) — foglio «Aggiungi» della barra Bozza A.
   Markup costruito solo in gestionale (openQuickAdd in app.js): nell'edizione
   completa queste regole sono inerti. ===== */
.qa-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.qa-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; font-size: 15.5px; text-align: left; }
.qa-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }