/* Layout 2: intestazioni leggibili (niente maiuscolo tracciato), sezioni a fisarmonica nel profilo, giornata del cibo a quattro pasti,
   notifiche con azioni, calendario con il giorno di oggi in evidenza. Solo token di tema: segue ogni tema e il modo scuro. */

/* ---- tipografia e superfici ---- */
h1{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.01em}
h2{font-size:17px;font-weight:750;letter-spacing:0;text-transform:none;color:var(--text)}
h3{margin:0}
.card{border-radius:22px;border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.fpage-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fpage-h .actions{margin-left:auto}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list .lib{width:100%;justify-content:space-between;text-align:left;font-weight:600}
.list .lib small{color:var(--muted);font-weight:500}

/* ---- barra: pallino delle notifiche ---- */
nav.tabs button .tabic{position:relative;display:grid}
.tabdot{position:absolute;top:-5px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font:800 11px/18px system-ui;text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--surface)}
@media (min-width:900px){nav.tabs button{min-height:60px}}

/* ---- chat: intestazione col pet e attesa ---- */
.chat-h{display:flex;align-items:center;gap:12px}
.chat-pet{display:block;width:44px;height:44px}.chat-pet svg{width:100%;height:100%}
.msg.thinking{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 10px}
.msg.thinking svg{width:56px;height:56px;animation:think 1.4s ease-in-out infinite;transform-origin:50% 90%}
.dotsmall{color:var(--muted);font-size:14px}
@keyframes think{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.msg.thinking svg{animation:none}}

/* ---- Tu: sezioni a fisarmonica ---- */
details.sec{padding:0;gap:0;overflow:hidden}
details.sec>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;cursor:pointer;border-radius:22px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary:focus-visible{box-shadow:inset var(--ring)}
details.sec>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
details.sec[open]>summary::after{transform:rotate(-135deg)}
details.sec[open]>summary{border-bottom:1px solid var(--line);border-radius:22px 22px 0 0}
.sic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,var(--surface2));font-size:18px}
.sbody{display:grid;gap:14px;padding:16px}
.me-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 20px;background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--koda) 12%,var(--surface)))}
.me-hero .pet-big{width:112px}.me-hero .pet-big svg{width:100%;height:auto}
.me-hero h1{font-size:28px}.me-hero p{color:var(--muted)}
.me-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.row2>.view{align-content:start}

/* ---- Cibo ---- */
.food-grid{display:grid;gap:var(--gap);align-items:start}
.food-side{display:grid;gap:var(--gap)}
@media (min-width:1000px){.food-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.fday{gap:16px}
.fday-h{display:flex;align-items:center;justify-content:space-between;gap:8px}.fday-h h2{text-transform:capitalize;font-size:20px}
.fday-top{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.fring-wrap{position:relative;width:132px;height:132px}
.fring{width:100%;height:100%;transform:rotate(-90deg)}
.fring circle{fill:none;stroke-width:9;stroke-linecap:round}
.fring .bg{stroke:var(--surface2)}.fring .fg{stroke:var(--accent);transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1)}
.fring-wrap.st-ok .fg{stroke:var(--good)}.fring-wrap.st-low .fg{stroke:var(--warn)}.fring-wrap.st-high .fg{stroke:var(--bad)}
.fring-in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.fring-in b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}.fring-in span{font-size:12px;color:var(--muted)}
.fmeters{display:grid;gap:10px;min-width:0}
.fmeter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;font-size:14px}
.fmeter progress{grid-column:1/-1;width:100%;height:10px;appearance:none;border:0;border-radius:99px;overflow:hidden;background:var(--surface2)}
.fmeter progress::-webkit-progress-bar{background:var(--surface2)}.fmeter progress::-webkit-progress-value{background:var(--accent);border-radius:99px}
.fmeter progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
.fmeter b{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.fask{padding:12px 14px;border-radius:14px;border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--surface));font-weight:600}
.fslot{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.fslot>header{display:flex;align-items:center;gap:8px}.fslot h3{font-size:16px}.fic{font-size:20px}
.frow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--surface2)}
.frow.skip{opacity:.7}.ftxt{display:grid;min-width:0}.ftxt b{overflow-wrap:anywhere}.ftxt small{color:var(--muted)}
.fact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fchip{font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.fchip.ok{background:color-mix(in srgb,var(--good) 22%,var(--surface));border-color:var(--good);color:var(--text)}
.frow.plan .fchip{border-color:var(--warn)}
.fadd{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:520px){.fday-top{grid-template-columns:1fr;justify-items:center}.fmeters{width:100%}.frow{grid-template-columns:minmax(0,1fr) auto}.frow>.fchip{grid-column:1/-1;justify-self:start}.frow.plan .fact{grid-column:1/-1;justify-content:flex-start}}
.fweek>header,.fmonth>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wbars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;height:112px;align-items:end}
.wbar{display:grid;grid-template-rows:1fr auto;gap:4px;height:100%;padding:0;border:0;background:none;color:var(--muted);font-size:11px;font-weight:700}
.wbar i{align-self:end;display:block;width:100%;min-height:0;border-radius:8px 8px 4px 4px;background:var(--line);transition:height .4s ease-out}
.wbar.st-ok i{background:var(--good)}.wbar.st-low i{background:var(--warn)}.wbar.st-high i{background:var(--bad)}
.wbar.sel{color:var(--text)}.wbar.sel i{outline:2px solid var(--text);outline-offset:2px}.wbar.today span{color:var(--accent)}
.wstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.wstats div{background:var(--surface2);border-radius:14px;padding:10px 12px}.wstats dt{font-size:12px;color:var(--muted)}.wstats dd{margin:0;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.fmonth .fhead{justify-content:space-between}.fmonth .fhead h2{text-transform:capitalize}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.drow input{grid-column:1/-1}.dchips{display:flex;gap:4px}
.dchip{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);font-weight:800;font-size:13px}
.dchip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.dgroup h4{margin:8px 0 0}
@media (pointer:coarse){.dchip{width:40px;height:40px}}

/* ---- Notifiche ---- */
.nlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nitem{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px;border-radius:16px;background:var(--surface2);border-left:5px solid var(--line)}
.nitem.unread{border-left-color:var(--accent)}.nitem.k-insulin:not(.done){border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface2))}
.nitem.done{opacity:.65}
.nic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);font-size:20px}
.nbody{display:grid;gap:6px;min-width:0}.nhead{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.nhead time{font-size:12px;color:var(--muted);white-space:nowrap}
.nmeals{display:grid;gap:8px}.nrow{display:grid;gap:6px;padding:8px 10px;border-radius:12px;background:var(--surface)}
.ndone summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}

/* ---- Calendario: oggi in evidenza, celle più pulite ---- */
.mgrid{gap:6px}
.mcell{border-radius:14px;border-color:transparent;background:var(--surface2);min-height:92px}
.mcell.today{border-color:transparent;background:color-mix(in srgb,var(--accent) 14%,var(--surface2))}
.mcell.today .mnum{display:grid;place-items:center;min-width:26px;height:26px;border-radius:13px;background:var(--accent);color:var(--ink)}
.mcell[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent);background:var(--surface2)}
.mcell .mnum{font-variant-numeric:tabular-nums}
.ev-chip{border-radius:6px}
.calhead h2{font-size:22px;text-transform:capitalize}
.calnav .btn.small{min-width:44px}
.split .calhead h2{font-size:18px}
.sd-list li{border-left-width:4px;border-radius:12px}
.wday.today b{background:var(--accent);color:var(--ink);border-radius:50%;display:inline-grid;place-items:center;min-width:28px;height:28px}
.mnum{white-space:nowrap}.mcount{display:none}
.wbar.sel i{min-height:6px}
.fleft{font-weight:600}
.nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fneed>header{display:flex;justify-content:space-between;align-items:baseline}