/* =========================================================
   HYPERVEX — scheda «Peso» del coach (js/weigh-coach.js)   (voce 14, 4/10/2026)
   ---------------------------------------------------------
   Tutto sotto .wpc. Colori dai token dell'app: dentro la dashboard coach (.cds) --red è l'ACCENTO scelto dal coach
   (viola, blu, verde…) e --surface/--line/--txt* seguono il tema (scuro, chiaro, OLED); su telefono valgono quelli
   dell'app, come per .cli-tile e .db-*.
   Motion: ingresso sfalsato dei blocchi (attributo data-in + --i, messo dal JS solo quando si ENTRA nella scheda), tendine
   che si aprono con grid-template-rows 0fr → 1fr (niente altezze misurate da JS), righe dei giorni che entrano una dopo
   l'altra all'apertura (--r), freccia che ruota, chip «in corso» che pulsa, interruttore con cursore elastico, hover su tutto.
   Un ridisegno in loco non rifà gli ingressi. prefers-reduced-motion: tutto fermo (in fondo).
   ========================================================= */
.wpc{ min-width:0; }

/* ---------- ingresso ---------- */
@keyframes wpcIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.wpc > [data-in]{ animation:wpcIn .46s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 60ms); }

/* ---------- card in cima: titolo, «i», interruttore ---------- */
.wpc-card .card-head{ margin-bottom:12px; padding-bottom:12px; }
/* la «i» resta 30px, ma l'area che risponde al tocco è di 44px */
.wpc-i{ display:grid; place-items:center; width:44px; height:44px; margin:-7px -9px -7px 0; flex:none; cursor:pointer; }

.wpc-sw{ width:100%; display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 14px; text-align:left;
  border-radius:14px; background:var(--surface-2); border:1px solid var(--line);
  transition:border-color .2s, background .2s, transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.wpc-sw-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.wpc-sw-t b{ font-size:15px; font-weight:800; letter-spacing:-.1px; overflow-wrap:anywhere; }
.wpc-sw-t .tiny{ line-height:1.4; font-weight:600; }
.wpc-sw-k{ flex:none; position:relative; width:52px; height:30px; border-radius:999px; background:var(--surface-3); border:1px solid var(--line);
  transition:background .26s, border-color .26s, box-shadow .26s; }
.wpc-sw-k i{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.3,1.5,.5,1); }
.wpc-sw.on .wpc-sw-k{ background:var(--red); border-color:transparent; box-shadow:0 8px 18px -10px var(--red-glow, var(--red)); }
.wpc-sw.on .wpc-sw-k i{ transform:translateX(22px); }
.wpc-sw:active{ transform:scale(.992); }
.wpc-sw[aria-busy="true"]{ pointer-events:none; }
.wpc-sw:focus-visible, .wpc-btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.wpc-h:focus-visible{ outline:2px solid var(--red); outline-offset:-3px; }          /* dentro il bordo: la tendina ha overflow:hidden */
@media (hover:hover){ .wpc-sw:hover{ border-color:color-mix(in srgb, var(--red) 42%, var(--line)); } }

/* ---------- messaggi (vuoto, caricamento, errore) ---------- */
.wpc-note{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:14px; border-radius:16px; border:1px dashed var(--line); color:var(--txt-3); }
.wpc-note > .ic{ width:26px; height:26px; flex:none; opacity:.8; margin-top:1px; }
.wpc-note > div{ min-width:0; }
.wpc-note b{ display:block; color:var(--txt-2); font-size:15px; font-weight:800; margin-bottom:2px; }
.wpc-note span{ display:block; font-size:13px; line-height:1.45; font-weight:600; }
.wpc-spin{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--surface-3); border-top-color:var(--red); animation:wpcSpin .8s linear infinite; flex:none; margin-top:2px; }
@keyframes wpcSpin{ to{ transform:rotate(360deg); } }
.wpc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; margin-top:10px; border-radius:12px;
  font-size:14px; font-weight:800; background:var(--surface-2); border:1px solid var(--line); color:var(--txt); transition:border-color .16s, transform .14s; }
.wpc-btn .ic{ width:17px; height:17px; }
.wpc-btn:hover{ border-color:var(--red); }
.wpc-btn:active{ transform:scale(.97); }

/* ---------- intestazione del periodo (programma) ---------- */
.wpc-ph{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:2px 12px; margin:6px 2px 10px; }
.wpc-ph b{ font-size:15px; font-weight:900; letter-spacing:-.2px; overflow-wrap:anywhere; }
.wpc-ph span{ font-size:12.5px; font-weight:700; color:var(--txt-3); }

/* ---------- tendine: una settimana (o il gruppo «Programmi precedenti») ---------- */
.wpc-sec{ --wk:var(--surface-3); position:relative; margin-bottom:10px; border-radius:16px; background:var(--surface); border:1px solid var(--line); overflow:hidden;
  transition:border-color .24s, box-shadow .24s; }
.wpc-sec::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--wk); transition:background .24s; }
.wpc-week.st-open{ --wk:var(--red); border-color:color-mix(in srgb, var(--red) 34%, var(--line)); }
.wpc-week.st-finished{ --wk:var(--ok); }
.wpc-week.st-locked{ background:transparent; border-style:dashed; }
.wpc-prev{ --wk:var(--txt-3); }
.wpc-sec.is-open{ box-shadow:0 16px 30px -24px rgba(0,0,0,.65); }

.wpc-h{ width:100%; min-height:56px; padding:10px 14px 10px 18px; display:grid; align-items:center; text-align:left; color:var(--txt);
  transition:background .18s; }
.wpc-wh{ grid-template-columns:minmax(0,1fr) auto auto 22px; column-gap:12px; row-gap:6px; grid-template-areas:"t c a x"; }
.wpc-wh .wpc-t{ grid-area:t; } .wpc-wh .wpc-chip{ grid-area:c; } .wpc-wh .wpc-avg{ grid-area:a; } .wpc-wh .wpc-chev{ grid-area:x; }
.wpc-gh{ grid-template-columns:minmax(0,1fr) 22px; column-gap:12px; }
.wpc-t{ font-size:15px; min-width:0; overflow-wrap:anywhere; }
.wpc-t b{ font-weight:900; letter-spacing:-.2px; }
.wpc-d{ color:var(--txt-2); font-weight:700; }
.wpc-cnt{ display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:8px; padding:0 7px; border-radius:999px; background:var(--surface-3); color:var(--txt-2); font-size:12px; font-weight:900; vertical-align:1px; }
.wpc-avg{ font-size:13px; font-weight:700; color:var(--txt-2); white-space:nowrap; }
.wpc-avg b{ color:var(--txt); font-size:14.5px; font-weight:900; font-variant-numeric:tabular-nums; }
.wpc-chev{ display:grid; place-items:center; color:var(--txt-3); transition:transform .32s cubic-bezier(.2,.8,.2,1), color .2s; }
.wpc-chev svg{ width:18px; height:18px; }
.wpc-sec.is-open > .wpc-h .wpc-chev{ transform:rotate(90deg); color:var(--red); }
@media (hover:hover){
  .wpc-h:not(:disabled):hover{ background:color-mix(in srgb, var(--red) 6%, var(--surface)); }
  .wpc-h:not(:disabled):hover .wpc-chev{ color:var(--red); }
}
.wpc-h:not(:disabled):active{ background:color-mix(in srgb, var(--red) 10%, var(--surface)); }
.wpc-h:disabled{ color:var(--txt-2); cursor:default; }
.wpc-week.st-locked .wpc-chev{ opacity:.6; }

.wpc-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; background:var(--surface-3); color:var(--txt-2);
  font-size:11.5px; font-weight:800; white-space:nowrap; }
.wpc-chip.c-open{ background:var(--red-soft); color:var(--red); }
.wpc-chip.c-open::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; animation:wpcPulse 1.8s ease-in-out infinite; }
.wpc-chip.c-done{ background:rgba(47,208,122,.14); color:var(--ok); }
.wpc-chip.c-lock{ background:var(--surface-3); color:var(--txt-3); }
@keyframes wpcPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

/* corpo: si apre portando la riga da 0fr a 1fr; chiuso è anche invisibile (niente fuoco da tastiera sul nascosto) */
.wpc-b{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .36s cubic-bezier(.2,.8,.2,1), visibility 0s linear .36s; }
.wpc-sec.is-open > .wpc-b{ grid-template-rows:1fr; visibility:inherit; transition-delay:0s; }
.wpc-bi{ min-height:0; overflow:hidden; }
.wpc-pl{ padding:2px 12px 4px 16px; }
.wpc-pl .wpc-sec{ margin-bottom:8px; }
.wpc-pl .wpc-per + .wpc-per{ margin-top:10px; }

/* ---------- i 7 giorni ---------- */
.wpc-days{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.wpc-day{ display:grid; grid-template-columns:112px 124px minmax(0,1fr); align-items:center; column-gap:12px; min-height:44px; padding:8px 14px 8px 18px;
  border-bottom:1px solid var(--line-soft); font-size:14px;
  opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .34s cubic-bezier(.2,.8,.2,1); }
.wpc-week.is-open > .wpc-b .wpc-day{ opacity:1; transform:none; transition-delay:calc(var(--r, 0) * 32ms + 60ms); }
.wpc-dl{ font-weight:800; color:var(--txt-2); white-space:nowrap; }
.wpc-dv{ font-size:15px; font-weight:900; letter-spacing:-.1px; color:var(--txt); font-variant-numeric:tabular-nums; }
.wpc-dt{ font-size:12.5px; font-weight:700; color:var(--txt-3); font-variant-numeric:tabular-nums; }
.wpc-no{ color:var(--txt-3); font-weight:700; }
.wpc-sk{ color:var(--warn); font-style:italic; font-weight:700; font-size:14px; }
/* tema chiaro: ambra e verde pieni su bianco leggono male → versioni più scure */
html[data-theme="light"] .wpc-sk, .cds[data-cds-theme="light"] .wpc-sk{ color:#B45309; }
html[data-theme="light"] .wpc-chip.c-done, .cds[data-cds-theme="light"] .wpc-chip.c-done{ background:rgba(21,128,61,.12); color:#15803D; }
.wpc-day.is-out .wpc-dl, .wpc-day.is-out .wpc-dv{ opacity:.42; }       /* fuori dal programma: attenuato */
.wpc-day.is-today .wpc-dl{ color:var(--red); }
.wpc-day.is-today .wpc-dl::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--red); vertical-align:middle; }
@media (hover:hover){ .wpc-week.is-open .wpc-day:hover{ background:color-mix(in srgb, var(--red) 5%, transparent); } }

.wpc-f{ padding:12px 14px 12px 18px; background:var(--surface-2); font-size:13.5px; font-weight:700; color:var(--txt-2); line-height:1.4; }
.wpc-f b{ color:var(--txt); font-weight:900; font-variant-numeric:tabular-nums; }

/* ---------- telefono: intestazione su due righe, niente scroll orizzontale ---------- */
@media (max-width:759px){
  .wpc-wh{ grid-template-columns:minmax(0,1fr) 22px; grid-template-areas:"t x" "c a"; }
  .wpc-wh .wpc-chip{ justify-self:start; }
  .wpc-wh .wpc-avg{ justify-self:end; }
  .wpc-week.st-locked .wpc-wh{ grid-template-areas:"t x" "c c"; }
  .wpc-day{ grid-template-columns:96px minmax(0,1fr) auto; column-gap:10px; padding-left:16px; padding-right:12px; }
  .wpc-dt{ justify-self:end; }
  .wpc-f{ padding-left:16px; }
  .wpc-pl{ padding:2px 8px 4px 10px; }
}

/* ---------- niente movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .wpc > [data-in]{ animation:none; }
  .wpc-b, .wpc-day, .wpc-chev, .wpc-sw-k, .wpc-sw-k i, .wpc-sw, .wpc-h, .wpc-sec{ transition:none; }
  .wpc-day{ transform:none; }
  .wpc-chip.c-open::before, .wpc-spin{ animation:none; }
}