/* Koda «Ember Bento» — componenti atomici. Usano solo i token di tokens.css e del tema.
   Regole: superfici a livelli (mai piatto assoluto), bordo alto speculare, ombre doppie tinte, niente gradienti angolo-angolo. */

/* ---- base e atmosfera ---- */
html{background:var(--s-base)}
body{background:transparent;color:var(--text);font:400 16px/1.5 var(--f-body);letter-spacing:-.003em}
/* un solo bagliore morbido in alto: luce calda dietro l'intestazione, mai sotto il testo */
body::before{content:"";position:fixed;inset:0 0 auto;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 20% -10%,color-mix(in srgb,var(--ember-500) 10%,transparent),transparent 70%),
             radial-gradient(45% 55% at 85% -5%,color-mix(in srgb,var(--amber) 6%,transparent),transparent 70%)}
h1,h2,h3{font-family:var(--f-disp);letter-spacing:var(--track-tight);color:var(--text)}
h2{font:var(--t-h2);text-transform:none;letter-spacing:var(--track-tight);color:var(--text)}
h3{font-size:16px;font-weight:600}
.muted{color:var(--muted)}
small,.t-sub{font:var(--t-meta)}
.num{font-family:var(--f-disp);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---- card: 3 varianti ---- */
.card{background:var(--s-card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--sp-5);gap:var(--sp-3);
  box-shadow:inset 0 1px 0 var(--spec),var(--sh-1)}
.card>header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);min-height:28px}
/* scheda con tono: un bagliore della sua tinta nell'angolo alto, il pallino del tono accanto al titolo */
.card[data-tone]{background:radial-gradient(110% 70% at 0 0,color-mix(in srgb,var(--tone) 9%,transparent),transparent 62%),var(--s-card)}
.card[data-tone]>header>h2,.card[data-tone]>h2{display:inline-flex;align-items:center;gap:10px}
.card[data-tone]>header>h2::before,.card[data-tone]>h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 16%,transparent)}
[data-tone=ember]{--tone:var(--ember-500)}[data-tone=emerald]{--tone:var(--emerald)}[data-tone=rose]{--tone:var(--rose)}
[data-tone=amber]{--tone:var(--amber)}[data-tone=royal]{--tone:var(--royal)}[data-tone=violet]{--tone:var(--violet)}
.card.float,dialog{background:var(--s-float);box-shadow:inset 0 1px 0 var(--spec),var(--sh-3)}

/* ---- bottoni ---- */
.btn{min-height:44px;padding:0 var(--sp-5);border:0;border-radius:var(--r-sm);font:600 15px/1 var(--f-disp);letter-spacing:-.01em;color:var(--ink);
  /* luce zenitale: un filo più chiaro in alto, più profondo in basso, stesso tono */
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 92%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--sh-cta)}
.btn.ghost{background:var(--s-card);color:var(--text);border:1px solid var(--hair);box-shadow:inset 0 1px 0 var(--spec),var(--sh-1)}
.btn.small{min-height:36px;padding:0 var(--sp-3);font-size:14px;border-radius:10px}
.btn.danger{background:color-mix(in srgb,var(--red) 12%,var(--s-card));color:var(--on-red);border:1px solid color-mix(in srgb,var(--red) 24%,transparent);box-shadow:none}
.link{color:var(--accent);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.icon-btn{background:var(--s-subtle);border:1px solid var(--hair);color:var(--text)}
.icon-btn.primary{background:var(--accent);color:var(--ink);border:0;box-shadow:var(--sh-cta)}

/* ---- tattilità: tutto ciò che si tocca risponde ---- */
.btn,.chip,.pill,.qcmd,.lock-w,.icon-btn,.check,.fab,nav.tabs button,.theme,.sp,.acc{
  transition:transform var(--d-fast) var(--spring),box-shadow var(--d-fast) var(--ease-out),background-color var(--d-fast) var(--ease-out),filter var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}
.btn:active,.chip:active,.pill:active,.qcmd:active,.lock-w:active,.icon-btn:active,.check:active,.fab:active,.theme:active,.sp:active,.acc:active{transform:scale(.97)}
@media (hover:hover){
  .btn:hover{filter:brightness(1.05)}
  .btn.ghost:hover,.chip:hover,.pill:hover,.qcmd:hover,.lock-w:hover{box-shadow:inset 0 1px 0 var(--spec),var(--sh-2)}
}

/* ---- chip, pill, badge ---- */
.chip,.pill,.card .chip,.card .pill{min-height:36px;padding:0 var(--sp-3);border-radius:999px;border:1px solid var(--hair);background:var(--s-subtle);color:var(--text);font:600 14px/1 var(--f-disp)}
button.chip[aria-pressed=true],.pill.on,.pill[aria-pressed=true],.card button.chip[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 14%,var(--s-card));border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--on-ember)}
/* badge semantici: fondo 14%, bordo 22%, testo vivido */
.badge,.card .badge{--b:var(--muted);--bt:var(--muted);display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font:600 12px/1.2 var(--f-disp);
  background:color-mix(in srgb,var(--b) 14%,transparent);border:1px solid color-mix(in srgb,var(--b) 22%,transparent);color:var(--bt)}
.badge.good{--b:var(--emerald);--bt:var(--on-emerald)}.badge.warn{--b:var(--amber);--bt:var(--on-amber)}.badge.bad{--b:var(--red);--bt:var(--on-red)}
.badge[style*="--c"]{--b:var(--c);--bt:var(--text)}

/* ---- input ---- */
input[type=text],input[type=number],input[type=password],input[type=search],input[type=date],input[type=time],select,textarea,.card input:not([type=checkbox]),.card select{
  background:var(--s-subtle);border:1px solid var(--hair);border-radius:var(--r-sm);color:var(--text);
  transition:border-color var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out),background-color var(--d-fast) var(--ease-out)}
input:focus,select:focus,textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--s-card);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---- check dei task ---- */
.check span{width:24px;height:24px;border:1.75px solid color-mix(in srgb,var(--text) 28%,transparent);background:var(--s-card)}
.task.done .check span{background:var(--emerald);border-color:var(--emerald);color:#fff;transform:scale(1.04)}

/* ---- barre di progresso: riempimento animato con punto luce finale ---- */
.meter-bar,.xp,.fbar{height:8px;border:0;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.meter-bar i,.xp i,.fbar i{--bar:var(--accent);position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--bar) 75%,transparent),var(--bar));border-radius:999px}
.meter-bar i::after,.xp i::after{content:"";position:absolute;right:1px;top:1px;bottom:1px;aspect-ratio:1;border-radius:50%;background:#fff;opacity:.85;box-shadow:0 0 8px 2px color-mix(in srgb,var(--bar) 80%,transparent)}
.meter.warn .meter-bar i{--bar:var(--amber)}.meter.bad .meter-bar i{--bar:var(--red)}
.meter-row{font:var(--t-meta);color:var(--muted)}.meter-row span:first-child{color:var(--text);font-weight:600}
.meter-row span:last-child{font-family:var(--f-disp);font-variant-numeric:tabular-nums}

/* ---- barra delle schede: vetro flottante, indicatore che scorre ---- */
nav.tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));gap:0;padding:6px;border:1px solid var(--hair);border-radius:24px;
  background:color-mix(in srgb,var(--s-float) 74%,transparent);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--spec),var(--sh-3);--tab-n:8}
nav.tabs::before{content:"";position:absolute;top:6px;bottom:6px;left:calc(6px + var(--tab-i,0) * (100% - 12px) / var(--tab-n));width:calc((100% - 12px) / var(--tab-n));
  border-radius:18px;background:color-mix(in srgb,var(--accent) 14%,var(--s-card));box-shadow:inset 0 1px 0 var(--spec),var(--sh-1);
  transition:left var(--d-base) var(--spring),top var(--d-base) var(--spring)}
nav.tabs:not([style*="--tab-i"])::before{opacity:0}
nav.tabs button,nav.tabs button[aria-current=page]{position:relative;background:transparent;color:var(--muted);font:600 10.5px/1.1 var(--f-disp);letter-spacing:-.015em;min-height:50px;padding:6px 0;border-radius:18px;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){nav.tabs{left:8px;right:8px;padding:5px}nav.tabs::before{top:5px;bottom:5px;left:calc(5px + var(--tab-i,0) * (100% - 10px) / var(--tab-n));width:calc((100% - 10px) / var(--tab-n))}}
nav.tabs button[aria-current=page]{color:var(--text)}
nav.tabs button[aria-current=page] svg{color:var(--accent)}
.fab{width:56px;height:56px;border-radius:18px;bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 92%,#000));color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--sh-cta)}
@media (min-width:900px){
  nav.tabs{left:12px;top:12px;bottom:12px;right:auto;width:84px;padding:12px 6px;border-radius:26px;align-content:start;gap:4px}
  nav.tabs button,nav.tabs button[aria-current=page]{height:60px;min-height:60px}
  nav.tabs::before{left:6px;right:6px;width:auto;top:calc(12px + var(--tab-i,0) * 64px);bottom:auto;height:60px}
  main{margin-left:108px}
  .fab{bottom:32px;right:40px}
}

/* ---- dialog e sheet ---- */
dialog{border:1px solid var(--hair);border-radius:var(--r-xl);color:var(--text)}
dialog::backdrop{background:rgb(var(--shade) / .38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root[data-mode=dark] dialog::backdrop{background:rgb(0 0 0 / .55)}
dialog.sheet{border-bottom:0}
dialog[open]{animation:ds-sheet var(--d-base) var(--ease-out)}
.dlg h3{font:var(--t-title);letter-spacing:var(--track-tight)}

/* ---- toast ---- */
#toast{border-radius:var(--r-md);background:color-mix(in srgb,var(--text) 94%,var(--accent));color:var(--bg);box-shadow:var(--sh-3);transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--spring)}
#toast.warn{background:var(--amber);color:#1A1714}

/* ---- skeleton e stati vuoti ---- */
.sk-card{display:grid;gap:12px}
.sk{display:block;height:var(--h,14px);width:var(--w,100%);border-radius:8px;
  background:linear-gradient(100deg,var(--s-subtle) 30%,color-mix(in srgb,var(--s-subtle) 40%,var(--s-card)) 50%,var(--s-subtle) 70%);background-size:300% 100%;animation:ds-shimmer 1.4s var(--ease-out) infinite}
.es{display:grid;justify-items:center;text-align:center;gap:6px;padding:var(--sp-5) var(--sp-3)}
.es-i{position:relative;isolation:isolate;width:52px;height:52px;margin-bottom:6px;border-radius:16px;display:grid;place-items:center;color:var(--on-ember);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--s-card)),color-mix(in srgb,var(--accent) 8%,var(--s-card)));
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:inset 0 1px 0 var(--spec),var(--sh-1)}
.es-i::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%)}
.es b{font:var(--t-h2);letter-spacing:var(--track-tight)}
.es p{font:var(--t-meta);color:var(--muted);max-width:30ch}
.es .btn{margin-top:8px}
.es.small{padding:var(--sp-2) 0;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:12px}
.es.small .es-i{width:36px;height:36px;border-radius:12px;margin:0;grid-row:span 2}
.es.small .es-i::before{display:none}

/* ---- ingresso sfalsato: solo quando si apre una vista (classe .enter su main, messa da app.js) ---- */
@media (prefers-reduced-motion:no-preference){
  main.enter .view>*,main.enter .bento>*{animation:ds-rise var(--d-slow) var(--ease-out) both}
  main.enter .view>:nth-child(2),main.enter .bento>:nth-child(1){animation-delay:calc(var(--stagger) * 1)}
  main.enter .view>:nth-child(3),main.enter .bento>:nth-child(2){animation-delay:calc(var(--stagger) * 2)}
  main.enter .view>:nth-child(4),main.enter .bento>:nth-child(3){animation-delay:calc(var(--stagger) * 3)}
  main.enter .view>:nth-child(5),main.enter .bento>:nth-child(4){animation-delay:calc(var(--stagger) * 4)}
  main.enter .bento>:nth-child(5){animation-delay:calc(var(--stagger) * 5)}
  main.enter .bento>:nth-child(6){animation-delay:calc(var(--stagger) * 6)}
  main.enter .bento>:nth-child(n+7){animation-delay:calc(var(--stagger) * 7)}
  .meter-bar i,.xp i{animation:ds-fill 900ms var(--ease-out) both}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none}
  dialog[open]{animation:none}
  nav.tabs::before{transition:none}
}
@keyframes ds-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes ds-fill{from{width:0}}
@keyframes ds-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes ds-sheet{from{opacity:0;transform:translateY(16px) scale(.985)}}

/* tasto «Annulla ultima azione»: pillola fissa in basso a sinistra, sopra la barra delle schede */
.undo-fab{position:fixed;z-index:21;left:16px;bottom:calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;border:1px solid var(--line, color-mix(in srgb,var(--text) 12%,transparent));background:var(--s-card);color:var(--text);font:600 14px/1 var(--f-body, inherit);box-shadow:var(--sh-2)}
.undo-fab:active{transform:scale(.97)}.undo-fab[hidden]{display:none}
@media (min-width:1000px){.undo-fab{bottom:32px;left:auto;right:112px}}

/* passando sopra un tasto si vede dove si sta per cliccare: dal bianco (superficie) a grigio */
@media (hover:hover){
  nav.tabs button:hover:not([aria-current=page]){background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
  :is(.btn.ghost,.chip,.pill,.qcmd,.lock-w,.icon-btn,.theme,.sp,.acc:not(:disabled),.undo-fab,.fm-btn,.seg button,.pose-btn):not([aria-pressed=true]):not([aria-current=true]):hover{background:color-mix(in srgb,var(--text) 10%,var(--s-card))}
}
:is(nav.tabs button,.btn.ghost,.chip,.pill,.qcmd,.icon-btn,.undo-fab):focus-visible{background:color-mix(in srgb,var(--text) 10%,var(--s-card))}