/* stile-ritocchi-2 — foglio di stile di RitMo Coach.
   Stava dentro coach.html. */
/* Il pallino non è rosso da allarme: è dello stesso vetro scuro
   dell'assistente, con il bordo nel verde di casa. Si vede, ma non urla. */
.ph .tasto-ai .ai-nov{
  position:absolute; top:-2px; right:-2px; z-index:3;
  min-width:19px; height:19px; padding:0 5px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; line-height:1; letter-spacing:-.01em;
  border-radius:99px; pointer-events:none;
  color:var(--accento-testo, var(--accento));
  background:color-mix(in srgb, var(--scheda, #10161200) 78%, transparent);
  border:1px solid color-mix(in srgb, var(--accento) 55%, transparent);
  box-shadow:0 2px 10px #0000006b, inset 0 0 0 1px #ffffff12;
  backdrop-filter:blur(9px) saturate(1.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);
}
/* la "eh?": il segno si inclina appena, due volte, e si ferma. Non gira
   in tondo per sempre: chiede attenzione una volta sola. */
@keyframes novitaEh{
  0%,62%,100%{ transform:rotate(0) }
  70%{ transform:rotate(-9deg) } 78%{ transform:rotate(6deg) }
  86%{ transform:rotate(-4deg) } 93%{ transform:rotate(2deg) }
}
.ph .tasto-ai.ha-novita svg{ animation:novitaEh 4.6s ease-in-out 3; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce){ .ph .tasto-ai.ha-novita svg{ animation:none } }

#novBanner{
  display:flex; flex-direction:column; gap:6px;
  margin:0 0 12px; padding:12px 13px 11px; border-radius:13px;
  background:color-mix(in srgb, var(--accento) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accento) 26%, transparent);
}
#novBanner > b{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accento-testo, var(--accento)); }
#novBanner span{ display:block; font-size:13px; line-height:1.45; color:var(--ink); }
#novBanner span i{ font-style:normal; color:var(--gray); font-size:11.5px;
  margin-right:7px; font-variant-numeric:tabular-nums; }
#novBanner span b{ font-weight:700; margin-right:5px; }
#novBanner span em{ font-style:normal; color:var(--gray); }
#novBanner button{
  align-self:flex-start; margin-top:3px; padding:5px 12px; border-radius:99px;
  font-size:12px; font-weight:700; cursor:pointer; color:var(--accento-testo, var(--accento));
  background:transparent; border:1px solid color-mix(in srgb, var(--accento) 40%, transparent);
}
#novBanner button:active{ transform:scale(.96) }


/* ============ IL NOME SI SCRIVE DOVE SI LEGGE ============
   22 settembre 2026. Due posti dove il gestionale chiedeva un nome con
   prompt(): il salvataggio di un modello e la rinomina nell'elenco. La
   finestrella del browser ha un altro aspetto, non si puo' vestire, e dentro
   l'app installata sul telefono a volte non compare. Adesso la domanda sta
   nella finestra di casa, con una casella dentro; e nell'elenco dei modelli
   il nome e' gia' la casella, senza passare da un tasto. */
.chiedi-campo { display:block; margin-top:16px; }
.chiedi-campo > span { display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--grigio); margin-bottom:6px; }
.chiedi-campo > input {
  width:100%; min-height:46px; padding:0 14px; border-radius:12px; font:inherit;
  /* 16px: sotto, l'iPhone ingrandisce la pagina da solo quando si tocca */
  font-size:16px; font-weight:600;
  border:1px solid var(--filo); background:var(--campo); color:var(--inchiostro);
}
.chiedi-campo > input:focus { outline:none; border-color:var(--accento); }

/* la riga di un modello: la casella si vede che e' una casella, se no
   nessuno prova a scriverci dentro */
.mrowi-tpl { align-items:center; gap:10px; }
.mrowi-tpl .tpl-nome {
  flex:1; min-width:0; font:inherit; font-size:16px; font-weight:600;
  padding:10px 12px; border-radius:11px;
  border:1px solid var(--filo); background:var(--campo); color:var(--inchiostro);
}
.mrowi-tpl .tpl-nome:hover { border-color:color-mix(in srgb, var(--accento) 40%, var(--filo)); }
.mrowi-tpl .tpl-nome:focus { outline:none; border-color:var(--accento); }

/* I codici vecchi (23 settembre 2026): un riquadro d'avviso, non un allarme.
   Etichetta grigia in maiuscolo come ogni insegna; l'ambra solo sul filo. */
.cod-vecchi { margin:0 0 12px; padding:16px; }
.cod-vecchi[hidden] { display:none; }
.cod-vecchi .cv-t { font:600 11px/1.2 var(--f-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--grigio, #9AA0A6); margin-bottom:8px; }
.cod-vecchi p { margin:0 0 12px; font-size:14px; line-height:1.45; max-width:68ch; }
.cod-vecchi .cv-l { list-style:none; margin:0 0 12px; padding:0; }
.cod-vecchi .cv-l li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--filo, rgba(255,255,255,.08)); }
.cod-vecchi .cv-l b { font-family:var(--f-mono, monospace); letter-spacing:.06em; }

/* LA BOZZA DELLA SCHEDA (revisione R06, 24 settembre 2026): una riga sopra i
   giorni, neutra, che dice di quando e' e come buttarla */
.bbozza{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px; border-radius:14px; border:1px solid var(--filo);
  background:var(--campo); font-size:13px; color:var(--grigio); }
.bbozza b{ color:var(--inchiostro); font-weight:600; }
.bbozza[hidden]{ display:none; }