/* rwyrd v4 — shell mobile (Fase 2, mobile4.jsx). Vale solo con html.m4 (≤700px e localStorage rw4-mobile diverso da "off").
   Riferimenti: Apple Music (tab bar e mini player in vetro, impilati), Linear / Telegram (cerchio Search a parte), Revolut (avatar in alto).
   Misure: header 52 · tab bar 60 a 12px dai bordi · cerchio Search 60 · mini player 56 a 8px sopra la tab bar · hit target ≥44. */
:root{
  --m4-gap:12px;--m4-tab:60px;--m4-mini:56px;
  --m4-glass:color-mix(in oklab,var(--surface) 88%,transparent);
  --m4-glass-line:color-mix(in oklab,var(--ink) 10%,transparent);
  --m4-safe:env(safe-area-inset-bottom,0px);
  --m4-chrome:calc(var(--m4-gap) + var(--m4-tab) + 8px + var(--m4-mini) + 16px + var(--m4-safe));
}
html.m4.m4-full{--m4-chrome:var(--m4-safe)}
/* i componenti hanno l'aspetto nella classe base; fuori da html.m4 sono nascosti (il Design system li mostra in .m4demo) */
html:not(.m4) .m4-hd,html:not(.m4) .m4-dock{display:none}
html .m4demo .m4-hd,html .m4demo .m4-dock{display:flex}

/* ── header: avatar a sinistra, campana a destra; il titolo grande resta nella pagina ── */
html.m4 .v4-tb{display:none}
.m4-hd{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));background:var(--bg);position:relative;z-index:31}
.m4-me{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:4px 10px 4px 4px;margin-left:-4px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.m4-me:hover,.m4-me[aria-expanded="true"]{background:var(--hover)}
.m4-me .tx{display:flex;flex-direction:column;min-width:0}
.m4-me b{font:600 14px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.m4-me .tx span{font:500 12px/16px var(--font);color:var(--ink-3)}
.m4-me .ic{color:var(--ink-3);flex:none}
.m4-bell{width:44px;height:44px;position:relative;flex:none}
.m4-bell .badge{position:absolute;top:2px;right:0}

/* ── spazio per la cornice flottante: il contenuto scorre sotto il vetro e finisce sopra di esso ── */
html.m4 .v4-docked .v4-main{padding-bottom:0}
html.m4 .v4 .v3-main{padding-bottom:var(--m4-chrome)}
html.m4 .v4-docked .v4-row{margin:0}

/* ── tab bar flottante + cerchio Search ── */
html.m4 .v3-tabbar{display:none}
.m4-dock{display:flex;gap:8px;position:fixed;z-index:45;left:max(var(--m4-gap),env(safe-area-inset-left,0px));right:max(var(--m4-gap),env(safe-area-inset-right,0px));bottom:calc(var(--m4-gap) + var(--m4-safe));pointer-events:none}
.m4-tab,.m4-fab{pointer-events:auto;background:var(--m4-glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--m4-glass-line);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.m4-tab{flex:1;min-width:0;height:var(--m4-tab);display:flex;padding:4px;gap:2px;border-radius:var(--r-pill)}
.m4-tab a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;font:500 11px/14px var(--font);-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.m4-tab a[aria-current="page"]{background:color-mix(in oklab,var(--ink) 10%,transparent);color:var(--ink)}
.m4-tab a:focus-visible,.m4-fab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.m4-ti{position:relative;display:grid;place-items:center;height:24px}
.m4-ti .badge{position:absolute;top:-6px;left:14px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
.m4-fab{flex:none;width:var(--m4-tab);height:var(--m4-tab);border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ── mini player in vetro sopra la tab bar (stessa larghezza della riga tab + Search) ── */
html.m4 .v4-docked .v4-pl,html.m4 .pl-bento .v4-docked .v4-pl{position:fixed;z-index:44;left:max(var(--m4-gap),env(safe-area-inset-left,0px));right:max(var(--m4-gap),env(safe-area-inset-right,0px));bottom:calc(var(--m4-gap) + var(--m4-tab) + 8px + var(--m4-safe));height:var(--m4-mini);margin:0;padding:0 6px 0 6px;gap:4px;grid-template-columns:minmax(0,1fr) auto;border-radius:18px;border:1px solid var(--m4-glass-line);background:var(--m4-glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 10px 30px rgba(0,0,0,.18)}
html.m4 .v4-pl-m{margin:0;padding:4px;gap:10px;border-radius:14px}
html.m4 .v4-pl-m .art{width:40px!important;height:40px!important}
html.m4 .v4-pl-btns{gap:0}
html.m4 .v4-pl-btns .ibtn:not(:nth-child(4)){display:none}
html.m4 .v4-pl-btns .ibtn,html.m4 .v4-pl-btns .pbtn{width:44px;height:44px}
html.m4 .v4-pl-btns .pbtn{background:transparent;color:var(--ink)}
html.m4 .v4-pl-btns .pbtn .ic{width:26px;height:26px}
html.m4.m4-full .v4-pl{display:none}
html.m4 .v4-docked .toast{bottom:calc(var(--m4-chrome) - 8px)}
/* colonna destra di riepilogo: si apre dal pulsante Summary nell'header (niente linguetta sul bordo che copre il contenuto) */
html.m4 .v4-rc-open{display:none!important}
.m4-hd-r{display:flex;gap:6px;align-items:center}
html.m4 .v4-docked .v4-rcol.open:not(.np){padding:calc(8px + env(safe-area-inset-top,0px)) 16px calc(24px + var(--m4-safe))}
/* player esteso e colonna destra aperti: sopra la cornice */
html.m4 .v4-docked .v4-rcol.open{z-index:60}

/* ── foglio dal basso (M4.Sheet): stessi token del popup principale, ancorato in basso ── */
.m4-veil{position:fixed;inset:0;z-index:75;background:rgba(6,6,9,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;align-items:flex-end;justify-content:center;animation:m4in .14s}
@keyframes m4in{from{opacity:0}to{opacity:1}}
.m4-sheet{width:100%;max-width:560px;max-height:88dvh;display:flex;flex-direction:column;background:var(--sheet,var(--surface));border:1px solid var(--glass-border,var(--line));border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.35);padding-bottom:var(--m4-safe,env(safe-area-inset-bottom,0px));animation:m4up .22s cubic-bezier(.2,.8,.2,1)}
@keyframes m4up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.m4-sheet,.m4-veil{animation:none}.m4-tab a{transition:none}}
.m4-grab{width:36px;height:5px;border-radius:3px;background:var(--line-strong,var(--line));margin:8px auto 0;flex:none}
.m4-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 8px 20px;border-bottom:1px solid var(--line)}
.m4-sheet-h b{font:600 17px/24px var(--font)}
.m4-sheet-h .ibtn{width:44px;height:44px}
.m4-sheet-b{overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 20px;display:flex;flex-direction:column;gap:12px}

/* contenuto del foglio account */
.m4-who{display:flex;align-items:center;gap:12px;padding:4px 0}
.m4-who>div{flex:1;min-width:0;display:flex;flex-direction:column}
.m4-who b{font:600 17px/22px var(--font)}
.m4-who span{font:var(--t-sub);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m4-who .ibtn{width:44px;height:44px;margin-right:-8px}
.m4-cap{font:600 12.5px/16px var(--font);color:var(--ink-3);margin:6px 4px -4px}
.m4-grp{display:flex;flex-direction:column;background:var(--surface-2);border-radius:20px;padding:4px}
.m4-it{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border:0;border-radius:16px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.m4-it:hover,.m4-it:focus-visible{background:var(--hover)}
.m4-it[aria-pressed="true"]{background:var(--selected)}
.m4-it .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.m4-it b{font:500 15px/20px var(--font)}
.m4-it em{font:var(--t-sub);font-style:normal;color:var(--ink-3)}
.m4-it>.ic:last-child{color:var(--ink-3)}
.m4-it.danger,.m4-it.danger .m4-ic{color:var(--err)}
.m4-ic,.m4-ws{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);color:var(--ink-2)}
.m4-ws{font:700 13px/1 var(--font);color:var(--ink)}
.m4-theme{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 8px}
.m4-theme span{font:500 15px/20px var(--font)}
.m4-theme .seg button{width:44px;height:36px}

/* ── footer azioni fisso (M4.Foot) per pagine di dettaglio: secondaria + primaria, lontane dai bordi, sopra la cornice ── */
.m4-foot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 0 calc(12px + var(--m4-safe,0px));background:var(--bg);border-top:1px solid var(--line)}
.m4-foot-i{flex:1;min-width:0;font:var(--t-sub);color:var(--ink-2)}
.m4-foot-a{display:flex;gap:8px;margin-left:auto}
.m4-foot-a .btn{min-height:44px}
html.m4 .m4-foot{position:fixed;left:0;right:0;bottom:0;z-index:62;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + var(--m4-safe)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -8px 24px rgba(0,0,0,.18)}
html.m4 .m4-foot-i{flex:0 0 auto;max-width:34%}
html.m4 .m4-foot-a{flex:1 1 auto;min-width:0}html.m4 .m4-foot-a .btn{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
html.m4 :has(>.m4-foot){padding-bottom:96px!important}

/* ── Design system: telefono finto per le demo ── */
.m4-phone{position:relative;width:100%;box-sizing:border-box;height:560px;max-width:390px;margin:0 auto;border:1px solid var(--line);border-radius:32px;overflow:hidden;background:var(--bg)}
.m4-phone-b{padding:0 16px}
.m4-ph-fill{height:120px;border-radius:20px;background:var(--surface-2);margin:0 0 12px}
.m4demo .m4-dock{position:absolute;left:12px;right:12px;bottom:12px}
.m4-mini-demo{position:absolute;left:12px;right:12px;bottom:80px;height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:0 6px;gap:4px;border-radius:18px;border:1px solid var(--m4-glass-line);background:var(--m4-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--m4-glass-line)}
.m4-mini-demo .v4-pl-btns .pbtn,.m4-mini-demo .v4-pl-btns .ibtn{width:44px;height:44px;background:transparent;color:var(--ink)}
.demo.m4demo{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.m4-phone .m4-sheet{max-height:92%}

/* ── Now playing a tutto schermo (Fase 3): chiusura in alto, controlli grandi, note leggibili con azioni in riga ── */
.v5np-ctl{display:none}
html.m4 .v4-docked .v4-rcol.open.np{padding:env(safe-area-inset-top,0px) 0 0;background:var(--bg)}
html.m4 .v4-rcol.np .v5np{border:0!important;border-radius:0;padding:8px 16px calc(12px + var(--m4-safe));height:100%;box-sizing:border-box}
html.m4 .v5np-cap .ibtn{width:44px;height:44px}
html.m4 .v5np-h{grid-template-columns:72px minmax(0,1fr);align-items:center}
html.m4 .v5np-h .art{width:72px!important;height:72px!important;border-radius:8px}
html.m4 .v5np-ti a,html.m4 .v5np-ti b{font-size:20px;line-height:26px}
html.m4 .v5np-ctl{display:flex;justify-content:center;align-items:center;gap:28px;margin:4px 0 12px}
html.m4 .v5np-ctl .ibtn{width:52px;height:52px;color:var(--ink)}
html.m4 .v5np-ctl .ibtn .ic{width:28px;height:28px}
html.m4 .v5np-ctl .pbtn{width:64px;height:64px}
html.m4 .v5np-ctl .pbtn .ic{width:30px;height:30px}
html.m4 .v5np-act .btn{min-height:44px;flex:1}
html.m4 .v5np-act .ibtn{width:44px;height:44px}
html.m4 .v5np-tabs button{min-height:40px}
html.m4 .v5np-acts,html.m4 .v5np-n .v5np-acts,html.m4 .v5np-n:hover .v5np-acts{position:static;opacity:1;pointer-events:auto;height:auto;margin:6px 0 0 -8px;padding:0;border:0;background:transparent;box-shadow:none;gap:2px}
html.m4 .v5np-acts button{width:40px;height:36px}
html.m4 .v5np-in{min-height:48px}
html.m4 .v5np-in input{font-size:16px}
html.m4 .v5np-send{width:40px;height:40px}

/* ── Chats (Fase 3): lista con meno controlli, bolle 85%, azioni a pressione lunga in una barra sopra la bolla ── */
html.m4 .v4-cl-q{display:none}/* Pitches, Transfers, People: in Music › Sends e in More › Contacts */
html.m4 .v3-mg .col,html.m4 .v4-conv.dock .v3-mg .col{max-width:85%}
html.m4 .v3-main [data-mid] .v3-mact{display:none!important}
html.m4 .v3-main [data-mid].m4-open .v3-mact{display:flex!important;opacity:1;position:absolute;top:-46px;right:0;left:auto;z-index:6;gap:2px;padding:4px;background:var(--sheet,var(--surface));border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-2)}
html.m4 .v3-main [data-mid].m4-open:has(.v3-mg:not(.me)) .v3-mact{left:36px;right:auto}
html.m4 .v3-main [data-mid].m4-open .v3-mact button,html.m4 .v3-main [data-mid].m4-open .v3-mact .ibtn{width:40px;height:40px}
html.m4 .v3-main [data-mid]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.m4 .v3-main [data-mid].m4-open .v3-bub,html.m4 .v3-main [data-mid].m4-open .col>*:first-child{filter:brightness(1.12)}
html.m4 .v4-clist-b .row{min-height:60px}

/* ── Planning (Fase 3): mese → striscia della settimana + agenda dal giorno scelto (Apple Store, Saturn) ── */
.m4-cal-bar{display:flex;align-items:center;gap:6px;padding:4px 0 8px}
.m4-cal-bar .t-h2{margin:0;font-size:22px;line-height:28px}
.m4-cal-bar .btn{min-height:40px}
.m4-wk{display:grid;grid-template-columns:32px repeat(7,minmax(0,1fr)) 32px;align-items:center;gap:2px;padding:0 0 12px}
.m4-wk .ibtn{width:32px;height:44px}
.m4-wk button:not(.ibtn){display:flex;flex-direction:column;align-items:center;gap:2px;min-height:60px;padding:6px 0;border:0;border-radius:16px;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.m4-wk button:not(.ibtn) span{font:500 11px/14px var(--font);color:var(--ink-3)}
.m4-wk button:not(.ibtn) b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:600 15px/1 var(--font)}
.m4-wk button.today b{color:var(--accent-ink,var(--accent))}
.m4-wk button[aria-pressed="true"] b{background:var(--ink);color:var(--ink-inv)}
.m4-wk i{width:5px;height:5px;border-radius:50%;background:transparent}
.m4-wk i.on{background:var(--ink-3)}
html.m4 .v4-agenda{padding:4px 12px}
html.m4 .v4-agenda .ag{grid-template-columns:44px minmax(0,1fr);gap:10px}
html.m4 .v4-agenda .ai{min-height:48px}

/* ── Live (Fase 3): scheda del giorno in cima allo show, dettagli dietro una riga ── */
.m4-day{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px}
.m4-day-v{display:flex;align-items:center;gap:12px}
.m4-day-v .tx,.m4-day-pr .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.m4-day-v b{font:600 16px/22px var(--font)}
.m4-day-v span,.m4-day-pr .tx span{font:var(--t-sub);color:var(--ink-2);overflow-wrap:anywhere}
.m4-day-v .btn,.m4-day-pr .btn{min-height:40px;flex:none}
.m4-tl{list-style:none;margin:0;padding:0 0 0 4px;display:flex;flex-direction:column}
.m4-tl li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:8px 0;position:relative}
.m4-tl li::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:1px;background:var(--line)}
.m4-tl li::after{content:"";position:absolute;left:59px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.m4-tl li.tbc::after{background:var(--surface);border:1px solid var(--ink-3);width:5px;height:5px}
.m4-tl li:first-child::before{top:18px}.m4-tl li:last-child::before{bottom:calc(100% - 18px)}
.m4-tl .t{font:600 15px/22px var(--font)}
.m4-tl li.tbc .t{color:var(--ink-3);font-weight:500;font-size:13px}
.m4-tl .tx{display:flex;flex-direction:column;padding-left:14px;min-width:0}
.m4-tl .tx b{font:500 15px/22px var(--font)}
.m4-tl .tx span{font:var(--t-sub);color:var(--ink-2)}
.m4-day-p{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.m4-day-pr{display:flex;align-items:center;gap:12px;min-height:52px}
.m4-day-pr em{font:500 12px/16px var(--font);font-style:normal;color:var(--ink-3)}
.m4-day-pr b{font:500 15px/20px var(--font)}
.m4-more{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.m4-more .tx{flex:1;display:flex;flex-direction:column}.m4-more b{font:600 15px/20px var(--font)}.m4-more .tx span{font:var(--t-sub);color:var(--ink-2)}
html.m4 .v4-showp .v4-proh2{flex-wrap:wrap}
html.m4 .m4-foot .btn .ic{display:none}html.m4 .m4-foot .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:center}

/* ── send veloce (Fase 3): persone recenti come avatar, scadenza e protezione riassunte in una riga, Send fisso in fondo ── */
.m4-pps{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px}
.m4-pps::-webkit-scrollbar{display:none}
.m4-pp{position:relative;flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;border:0;border-radius:16px;background:transparent;color:var(--ink);cursor:pointer;font:500 12px/16px var(--font)}
.m4-pp[aria-pressed="true"]{background:var(--selected)}
.m4-pp span{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m4-pp i{position:absolute;top:4px;right:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent,#fff);border:2px solid var(--sheet,var(--surface))}
.m4-sheet .m4-it .seg button{min-width:44px;height:36px}
.m4-sheet .search input{font-size:16px}
html.m4 .m4-foot-a .ibtn{flex:none;width:44px;height:44px}

/* ── Chats: sotto-canali in un selettore sotto il titolo (al posto dei tab che scorrono) ── */
.m4-subsel{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin:2px 0 0 -8px;padding:0 10px 0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 13px/18px var(--font);cursor:pointer}
.m4-subsel:hover,.m4-subsel[aria-expanded="true"]{background:var(--hover);color:var(--ink)}
.m4-subsel .badge{margin-left:4px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
html.m4 .v4-conv-h{min-height:64px}

/* ── 26 ott · check mobile completo (audit a 390px, 93 schermate) ── */
/* pannelli di dettaglio (task, evento, send): sopra di loro niente cornice, che copriva le ultime righe */
html.m4 .v3-app.has-panel .m4-dock,html.m4 .v3-app.has-panel .v4-docked .v4-pl,html.m4 .v3-app.has-panel .v4-pl{display:none}
html.m4 .v3-app.has-panel .panel{padding-bottom:var(--m4-safe)}
/* titolo + azioni della pagina: se non ci stanno, le azioni vanno a capo invece di tagliare il titolo ("Release…") */
html.m4 .v4-ph{flex-wrap:wrap;row-gap:10px;align-items:center}html.m4 .v4-ph h1{flex:1 0 auto;white-space:nowrap}
/* show e offerte in Live: le pillole sotto il titolo, il titolo intero */
html.m4 .v4-show{grid-template-columns:52px minmax(0,1fr);row-gap:6px}
html.m4 .v4-show>:last-child{grid-column:2;justify-content:flex-start;max-width:none}
/* righe con pillola di stato lunga (Costs, Transfers): la pillola va a capo, il titolo resta leggibile */
html.m4 .row .end .pill{white-space:normal;height:auto;min-height:22px;line-height:16px;padding-top:3px;padding-bottom:3px;text-align:right;max-width:128px}
/* switch e filtri con molte voci: una riga che scorre (regola filtri rapidi), mai a capo */
html.m4 .v4-led .seg,html.m4 .v4-bx-h .chips,html.m4 .v4-days{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
html.m4 .v4-led .seg button,html.m4 .v4-bx-h .chips button{flex:none}
html.m4 .v4-bx-h{flex-wrap:wrap;row-gap:8px}

/* ── 26 ott · selettore delle sezioni della traccia (ClickUp "List ▾"), al posto delle 11 tab ── */
.m4-secsel{padding:8px var(--gx,16px) 0}
.m4-secsel-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;max-width:100%;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:500 14px/1 var(--font);cursor:pointer}
.m4-secsel-b .g{color:var(--ink-3);font-weight:500}.m4-secsel-b b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m4-secsel-b .badge{margin-left:2px}
.m4-n{font:500 13px/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.m4-dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}

/* ── 26 ott · popup di lavoro (Search, Notifications) su telefono: le categorie diventano tab sottolineate in alto (ClickUp Inbox/Search) ── */
html.m4 .v4-wp-b{flex-direction:column}
html.m4 .v4-wp-nav{display:flex;flex-direction:row;width:auto;flex:none;gap:2px;padding:0 8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
html.m4 .v4-wp-nav::-webkit-scrollbar{display:none}
html.m4 .v4-wp-nav button{flex:none;height:44px;padding:0 10px;gap:6px;border-radius:0;background:transparent;box-shadow:inset 0 -2px 0 transparent}
html.m4 .v4-wp-nav button .ic{display:none}
html.m4 .v4-wp-nav button span{flex:none}
html.m4 .v4-wp-nav button[aria-current]{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
html.m4 .v4-wp-nav button:hover{background:transparent}
html.m4 .v4-wp-l{flex:1;min-height:0}
/* uscita visibile dal popup di lavoro a tutto schermo (prima solo Esc) */
.v4-wp-x{display:none}
html.m4 .v4-wp-x{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 8px;border:0;background:transparent;color:var(--accent-ink,var(--accent));font:600 15px/1 var(--font);cursor:pointer;flex:none}
html.m4 .v4-wp-top kbd{display:none}

/* ── 26 ott · tab bar a sole icone + 5ª voce ⋮⋮⋮ con la griglia delle sezioni (ClickUp "Apps"; flag rw4-apps) ── */
.m4-tab.icons a,.m4-appsb{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.m4-tab.icons a[aria-current="page"],.m4-appsb.on{background:color-mix(in oklab,var(--ink) 10%,transparent);color:var(--ink)}
.m4-tab.icons .m4-ti .ic{width:26px;height:26px}
.m4-appsb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.m4-appsb .m4-ti svg{width:24px;height:24px}
.m4-apps-veil{position:fixed;inset:0;z-index:-1;pointer-events:auto;background:rgba(6,6,9,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:m4in .14s}
.m4-apps{position:absolute;left:0;bottom:calc(var(--m4-tab) + 10px);width:calc(100% - var(--m4-tab) - 8px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 4px;padding:14px 10px;pointer-events:auto;border-radius:28px;background:var(--sheet,var(--surface));border:1px solid var(--m4-glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35);transform-origin:80% 100%;animation:m4apps .18s cubic-bezier(.2,.8,.2,1)}
@keyframes m4apps{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m4-apps{animation:none}}
.m4-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:16px;color:var(--ink);text-decoration:none;min-height:88px;-webkit-tap-highlight-color:transparent}
.m4-app:hover,.m4-app:focus-visible{background:var(--hover);outline:none}
.m4-app-i{position:relative;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink)}
.m4-app.on .m4-app-i{background:var(--ink);color:var(--ink-inv)}
.m4-app-i .badge{position:absolute;top:-4px;right:-6px}
.m4-app-l{font:500 12.5px/16px var(--font);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la griglia sta sopra il mini player */
html.m4 .m4-dock.apps{z-index:46}

/* ── 26 ott · tab bar con due posti liberi (rw4-tabedit): "Edit tab bar" nella griglia + foglio con anteprima ── */
.m4-apps-edit{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:4px;border:0;border-top:1px solid var(--line);border-radius:0 0 18px 18px;background:transparent;color:var(--ink-2);font:600 13.5px/1 var(--font);cursor:pointer}
.m4-apps-edit:hover,.m4-apps-edit:focus-visible{color:var(--ink);background:var(--hover);outline:none}
.m4-te-why{margin:0 4px;font:var(--t-sub);color:var(--ink-2)}
.m4-te-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px;border-radius:24px;background:var(--surface-2)}
.m4-te-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:68px;padding:6px 2px;border-radius:18px;border:0;background:transparent;color:var(--ink-2);font:inherit}
.m4-te-slot.fixed{opacity:.7}
.m4-te-slot.fixed>.ic:last-child{position:absolute;top:6px;right:8px;color:var(--ink-3)}
.m4-te-slot.free{border:1.5px dashed var(--line-strong,var(--ink-3));color:var(--ink);cursor:pointer}
.m4-te-slot.free.on{border-style:solid;border-color:var(--ink);background:var(--surface)}
.m4-te-slot.free:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.m4-te-i{display:grid;place-items:center;height:24px}.m4-te-i svg{width:22px;height:22px}
.m4-te-l{font:500 11.5px/14px var(--font);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m4-sheet .m4-it[disabled]{opacity:.45;cursor:default}
.m4-sheet .m4-it[aria-checked="true"]{background:var(--selected)}
.m4-foot .v3-link:disabled{opacity:.4;cursor:default}
/* 27 ott · tab che cambia (ClickUp): icona della sezione + ˄; attiva o con la griglia aperta = stessa pillola delle altre tab */
.m4-tab.icons a.m4-slot{gap:2px;flex-direction:row}
.m4-tab.icons a.m4-slot>.ic:last-child{width:12px;height:12px;opacity:.65;margin-right:-6px}
.m4-tab.icons a.m4-slot.on{background:color-mix(in oklab,var(--ink) 10%,transparent);color:var(--ink)}
/* 27 ott · switch Studio/Listen al centro dell'header: avatar a sinistra, Summary e campanella a destra; area di tocco 44 */
.m4-hd3{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.m4-hd3 .m4-me{justify-self:start;padding:4px 8px 4px 4px;gap:4px}
.m4-hd3 .m4-hd-r{justify-self:end}
.m4-mode{display:flex;padding:3px;gap:2px;border-radius:var(--r-pill);background:var(--surface-2);position:relative}
.m4-mode button{position:relative;height:32px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 13.5px/32px var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.m4-mode button::after{content:"";position:absolute;inset:-6px -2px}
.m4-mode button[aria-pressed="true"]{background:var(--ink);color:var(--ink-inv)}
.m4-mode button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:340px){.m4-mode button{padding:0 9px;font-size:13px}}

/* ── 27 ott · check completo (desktop + telefono) ── */
/* un solo fondo su telefono: header, area di lavoro e lista Chats sullo stesso grigio della pagina (prima: header 243, contenitore 249, lista Chats bianca → fasce grigie) */
html.m4 .v4-docked .v4-row,html.m4.pl-bento .v4-docked .v4-row{background:var(--bg)}
html.m4 .v4-clist{background:transparent;border:0;border-radius:0;box-shadow:none;padding-left:10px;padding-right:10px}
/* la lista Chats scorre fino in fondo sotto il vetro (prima si fermava sopra il mini player lasciando una fascia vuota) */
html.m4 .v3-main:has(>.v4-chats:not(.has-cur)){padding-bottom:0}
html.m4 .v4-chats:not(.has-cur) .v4-clist{padding-bottom:0}
html.m4 .v4-chats:not(.has-cur) .v4-clist-b{padding-bottom:var(--m4-chrome)}
/* margine laterale unico: 16 a sinistra e a destra (prima 16 / 8; Calendar 8 / 8) */
html.m4 .v4-docked .v4-page,html.m4 .v4-docked .v3-col{padding-right:16px}
html.m4 .v4-docked .v4-cal-main{padding-left:16px;padding-right:16px}
/* titolo + azioni nelle pagine v3 (Sent, Received, Collections, Shared with you): azioni a destra, a capo se non ci stanno; niente spazio riservato di 104px (era per la campana della v3) */
html.m4 .v3-col>.v3-head:first-child{padding-right:0}
html.m4 .v3-head{flex-wrap:wrap;row-gap:10px;align-items:center}
html.m4 .v3-head>h1{flex:1 0 auto;white-space:nowrap}
/* richiesta di messaggio: Decline · Accept su una riga sotto il testo (prima Accept usciva dal bordo) */
html.m4 .v4-req{flex-wrap:wrap;row-gap:10px}
html.m4 .v4-req>div{flex:1 1 calc(100% - 56px)}
html.m4 .v4-req>.btn:nth-last-child(2){margin-left:auto}
html.m4 .v4-req>.btn{min-height:44px}
/* profilo del pro: Book (primaria) a tutta riga sopra, poi Save · Message · Ask for a quote (prima Book usciva dal bordo) */
html.m4 .v4-proh-a{flex-wrap:wrap}
html.m4 .v4-proh-a .btn.primary{order:-1;flex:1 0 100%;min-height:44px}
/* Calendar: Tasks · Notes · Attention come pillole con etichetta e contatore (prima tre icone senza nome e una linea a metà larghezza) */
html.m4 .v4-strip{justify-content:flex-start;gap:8px;padding:0 16px 4px;border-bottom:0;overflow-x:auto;scrollbar-width:none}
html.m4 .v4-strip button{width:auto;height:36px;padding:0 12px;gap:6px;display:inline-flex;align-items:center;flex:none;border:1px solid var(--line);border-radius:var(--r-pill);font:500 13.5px/1 var(--font)}
html.m4 .v4-strip button .ic{width:18px;height:18px}
html.m4 .v4-strip .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;order:1}
html.m4 .v4-strip .badge{position:static;order:2}
/* Pros › Your services: unità sotto il prezzo, così il nome del servizio resta leggibile (prima "To… wr… Mel…") */
html.m4 .v4-svc-e{gap:0;align-items:center}
html.m4 .v4-svc-e>b{display:flex;flex-direction:column;align-items:flex-end;line-height:18px;margin-right:4px}
html.m4 .v4-svc-e>b .t-sub{font-size:11.5px;line-height:14px;white-space:nowrap}
/* Calendar: le pillole Tasks · Notes · Attention ora stanno nel contenuto, sotto il titolo */
html.m4 .v4-cal-main>.v4-strip{padding:0 0 12px;margin:0}
/* Planning › Tasks: gruppi uno sotto l'altro (prima colonne affiancate che scorrevano in orizzontale, card tagliate dal bordo) */
html.m4 .v4-board{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow-x:visible;gap:12px}
/* 27 ott · audit microazioni: periodo personalizzato su telefono — il mese occupava metà larghezza (griglia a sinistra), margini 14/10 diversi dal resto, giorni e pulsanti sotto i 44px */
html.m4 .v4-rp-ms>.v4-rp-m{flex:1;min-width:0}
html.m4 .v4-rp-p{padding:8px 4px;gap:4px;scrollbar-width:none}
html.m4 .v4-rp-p::-webkit-scrollbar{display:none}
html.m4 .v4-rp-p button{height:40px;padding:0 12px}
html.m4 .v4-rp-c{padding:12px 16px calc(12px + var(--m4-safe));gap:10px}
html.m4 .v4-rp-h .ibtn{width:44px;height:44px}
html.m4 .v4-rp-m b{font:600 15px/22px var(--font);margin:0 0 8px}
html.m4 .v4-rp-g button{height:44px;font-size:15px}
html.m4 .v4-rp-g em{font-size:12px;line-height:24px}
html.m4 .v4-rp-f{padding-top:12px}
html.m4 .v4-rp-f .btn{min-height:44px;padding-left:20px;padding-right:20px}
html.m4 .v4-rp-veil{background:rgba(6,6,9,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
/* titoli di pagina su telefono: una sola misura (28/40) per tutte le pagine, anche Calendar, Chats e le pagine v3; righe del titolo centrate sull'altezza dei pulsanti (40) così il titolo cade sempre alla stessa altezza */
html.m4 .v3-main h1.t-title,html.m4 .v4-retitle>.v3-col>.v3-head h1::after{font-size:28px!important;line-height:44px!important}
html.m4 .v4-retitle>.v3-col>.v3-head h1{height:44px}
html.m4 .v4-ph,html.m4 .v3-head,html.m4 .v4-cal-top,html.m4 .v4-clist-h{align-items:center;min-height:44px}
html.m4 .v4-docked .v4-cal-main{padding-top:16px}
html.m4 .v4-chats:not(.has-cur) .v4-clist{padding-top:12px}
/* titolo rinominato (Sent, Received): il testo originale resta nascosto anche con la regola dei titoli da telefono (prima "SendsSent") */
html.m4 .v4-retitle>.v3-col>.v3-head h1.t-title{font-size:0!important}
/* conferme: dialog compatto centrato anche su telefono (regola "le piccole conferme restano dialog compatti"); prima diventavano una pagina bianca a tutto schermo */
html.m4 .scrim:has(>.popup.confirm){align-items:center;padding:16px}
html.m4 .popup.confirm{height:auto;max-width:400px;width:100%;border-radius:22px}
html.m4 .popup.confirm .acts .btn{min-height:44px;flex:1}
/* menu (popover) su touch: voci da 44px */
html.m4 .pop button,html.m4 .pop [role=menuitem]{min-height:44px}
/* 27 ott · audit dei popup su telefono (81 aperti uno per uno) */
/* piede: l'informazione va su una riga sua sopra i pulsanti (prima "Ownership of the master adds up to 85%…" stretto in una colonna da 60px; "Expires in 7 days", "Rae will see it" su due righe) */
html.m4 .popup .pf{flex-wrap:wrap;row-gap:10px}
html.m4 .popup .pf>.info,html.m4 .popup .pf>span:not(:empty):not(.btn){flex:1 1 100%!important;order:-1}
html.m4 .popup .pf .btn{min-height:44px}
/* switch dentro i popup: niente testo a capo dentro la pillola ("Yearly · €150 (2 months free)", "Everyone on it"); se non ci sta scorre */
html.m4 .popup .seg{overflow-x:auto;scrollbar-width:none;max-width:100%}
html.m4 .popup .seg::-webkit-scrollbar{display:none}
html.m4 .popup .seg button{white-space:nowrap;flex:1 0 auto}
/* titolo del popup con uno switch accanto (New event · Event/Task/Moment): il titolo resta su una riga */
html.m4 .popup .ph h2{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.m4 .popup .ph>.ibtn:last-child{margin-left:auto}
html.m4 .popup .ph .seg{min-width:0;flex:0 1 auto;margin-left:auto}
html.m4 .popup .ph .seg+.ibtn:last-child{margin-left:8px}
/* scorciatoie da tastiera nei popup: non servono al tocco */
html.m4 .popup kbd{display:none}
html.m4 .popup .ph:has(.seg) h2{flex-shrink:0}
/* 27 ott · switch Studio/Listen nell'header alto quanto i cerchi di Summary e campanella (44): era 38 e sembrava piccolo */
.m4-mode{padding:4px;gap:2px;height:44px;box-sizing:border-box;align-items:center}
.m4-mode button{height:36px;padding:0 16px;font:500 14.5px/36px var(--font)}
.m4-mode button::after{inset:-4px -2px}
@media (max-width:360px){.m4-mode button{padding:0 11px;font-size:14px}}
/* 27 ott · ← nell'header delle schermate di dettaglio (al posto dell'avatar), cerchio 44 come campanella e Summary */
.m4-back{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);cursor:pointer;justify-self:start;-webkit-tap-highlight-color:transparent}
.m4-back:active{background:var(--hover)}
.m4-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* con il ← nell'header i ritorni dentro la pagina sono doppi: nascosti su telefono (restano su desktop come "sezione madre") */
html.m4.m4back .v4-proh:has(>.v3-link:only-child),html.m4.m4back .v3-back{display:none}
/* 27 ott · spazio traccia: switch dei gruppi + tab delle sezioni (rw4-tracktabs); fisso in cima mentre la testata scorre via */
.m4-sectabs{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;gap:6px;padding:8px var(--gx,16px) 0;background:var(--bg)}
.m4-sectabs>.seg{width:100%}
.m4-sectabs>.seg button{flex:1;height:36px}
.m4-sectabs-t{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;border-bottom:1px solid var(--line);margin:0 calc(-1 * var(--gx,16px));padding:0 var(--gx,16px)}
.m4-sectabs-t::-webkit-scrollbar{display:none}
.m4-sectabs-t button{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0;border:0;background:transparent;color:var(--ink-2);font:500 14.5px/1 var(--font);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;-webkit-tap-highlight-color:transparent}
.m4-sectabs-t button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.m4-sectabs-t .badge{min-width:16px;height:16px;font-size:10px;padding:0 4px}
/* tab delle sezioni: niente pillola né sfondo (prima l'attiva prendeva il fondo bianco e la pillola scorrevole delle .tabs); solo testo + linea 2px */
.m4-sectabs-t button,.m4-sectabs-t button[aria-selected="true"]{background:transparent!important;border-radius:0}
/* 27 ott · riga unica delle sezioni della traccia (rw4-trackrow): separatore tra i gruppi */
.m4-secrow{padding-top:4px}
.m4-secsep{flex:none;align-self:center;width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.5}
/* header di dettaglio: titolo compatto al centro, compare scorrendo */
.m4-hd-t{justify-self:center;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px/22px var(--font);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.m4-hd-t.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.m4-hd-t{transition:none}}
/* 27 ott · switch dei gruppi della traccia con le stesse misure dello switch Studio/Listen (44 · padding 4 · pillole 36 · 500 14.5); era 42 · 3 · 13.5 */
.m4-sectabs>.seg{height:44px;padding:4px;gap:2px;box-sizing:border-box;align-items:center}
.m4-sectabs>.seg button{height:36px;font:500 14.5px/36px var(--font);padding:0 12px}

/* ── 27 ott · vetro + sfumatura in alto e in basso (Revolut; tavola Research board 14). Flag html.m4fade, off: localStorage rw4-m4fade="off".
   L'header sta sopra il contenuto: la pagina scorre sotto di lui e sfuma; in basso il contenuto sfuma dietro mini player e tab bar.
   Vetro solo sulla cornice che galleggia (pulsanti dell'header, switch, mini player, tab bar, Search); card e righe restano piene. ── */
html.m4.m4fade{--m4-hdh:calc(52px + env(safe-area-inset-top,0px));--m4-glass-btn:color-mix(in oklab,var(--surface-2) 72%,transparent)}
html.m4.m4fade .v4-main{position:relative}
html.m4.m4fade .m4-hd{position:absolute;top:0;left:0;right:0;z-index:31;background:transparent;isolation:isolate}
html.m4.m4fade .m4-hd::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(100% + 28px);pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in oklab,var(--bg) 82%,transparent) 45%,color-mix(in oklab,var(--bg) 40%,transparent) 75%,transparent 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
html.m4.m4fade .v4-docked .v4-main:has(>.m4-hd) .v3-main{padding-top:var(--m4-hdh);scroll-padding-top:var(--m4-hdh)}
/* elementi sticky (top:0) si fermano già sotto l'header: lo sticky rispetta il padding-top di .v3-main */
/* pulsanti dell'header e switch Studio/Listen in vetro (come la tab bar) */
html.m4.m4fade .m4-hd .ibtn.filled,html.m4.m4fade .m4-back,html.m4.m4fade .m4-mode{background:var(--m4-glass-btn);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 0 0 1px var(--m4-glass-line)}
html.m4.m4fade .m4-mode button[aria-pressed="true"]{box-shadow:none}
/* sfumatura in basso: dietro mini player e tab bar, sopra il contenuto */
html.m4.m4fade .v4-docked .v4-main::after{content:"";position:fixed;z-index:43;left:0;right:0;bottom:0;height:calc(var(--m4-chrome) + 48px);pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0%,color-mix(in oklab,var(--bg) 92%,transparent) 45%,color-mix(in oklab,var(--bg) 55%,transparent) 75%,transparent 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to top,#000 65%,transparent);mask-image:linear-gradient(to top,#000 65%,transparent)}
html.m4.m4fade.m4-full .v4-main::after,html.m4.m4fade .v3-app.has-panel .v4-main::after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html.m4.m4fade .m4-hd::before{background:var(--bg)}}

/* ── 27 ott · header come Revolut (flag html.m4dot, off: localStorage rw4-hddot="off"): tutto alto 44 — avatar, switch, cerchi; niente freccia sull'avatar.
   Notifiche come pallino (accento, anello del fondo) su campanella e tab bar; il numero resta nel testo per i lettori di schermo. ── */
html.m4.m4dot .m4-hd3 .m4-me{width:44px;height:44px;min-height:44px;padding:0;margin:0;gap:0;border-radius:50%;justify-content:center;background:transparent}
html.m4.m4dot .m4-hd3 .m4-me .av{width:44px!important;height:44px!important}
html.m4.m4dot .m4-hd3 .m4-me .m4-ws{width:44px;height:44px;font-size:17px;background:var(--m4-glass-btn,var(--surface-2))}
html.m4.m4dot .m4-hd .badge,html.m4.m4dot .m4-ti .badge{font-size:0!important;color:transparent;min-width:0;width:10px;height:10px;padding:0;border-radius:50%;background:var(--accent,var(--blue));box-shadow:0 0 0 2px var(--bg)}
html.m4.m4dot .m4-hd .m4-bell .badge{top:7px;right:8px}
html.m4.m4dot .m4-ti .badge{top:-2px;left:auto;right:-5px}

/* ── 27 ott · opzione A: sotto-menu fissi nella fascia di vetro (flag html.m4stk, off: localStorage rw4-m4stuck="off").
   Barra ferma sotto l'header (.m4-stuck) = stesso vetro dell'header, senza bordo tra i due; la sfumatura parte sotto la barra, non sotto l'header. ── */
html.m4.m4fade.m4stk{--m4-glass-bar:color-mix(in oklab,var(--bg) 88%,transparent)}
html.m4.m4fade.m4stk .v4-main:has(.m4-stuck) .m4-hd::before{height:100%;background:var(--m4-glass-bar);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);-webkit-mask-image:none;mask-image:none}
html.m4.m4fade.m4stk .m4-stuck{background:var(--m4-glass-bar)!important;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
html.m4.m4fade.m4stk .m4-stuck::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;
  background:linear-gradient(to bottom,var(--m4-glass-bar),transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
html.m4.m4fade.m4stk .m4-stuck .m4-sectabs-t{border-bottom-color:transparent}

/* 27 ott · tab bar: niente dissolvenza dello sfondo (la pillola la porta v4-slide.js); al tocco l'icona risponde subito */
html.m4 .m4-tab a{transition:color .34s cubic-bezier(.3,.8,.2,1)}
html.m4 .m4-tab a:active .m4-ti{transform:scale(.92);transition:transform .08s}

/* ── 27 ott · traccia: 4 tab fisse + 5ª che cambia (rw4-tslot). Stessa riga sottolineata; la 5ª ha ˅ e, toccata quando è attiva, apre la griglia
   sotto la riga (stesse tessere della griglia della tab bar), divisa per Track · Rights · Release. ── */
.m4-ts5 .m4-sectabs-t{gap:18px}
.m4-ts5 .m4-ts-slot{display:inline-flex;align-items:center;gap:4px}
.m4-ts5 .m4-ts-slot .ic{color:var(--ink-3);flex:none}
.m4-ts5 .m4-ts-slot[aria-selected="true"] .ic{color:var(--ink)}
.m4-tgrid-veil{position:fixed;inset:0;z-index:7;background:rgba(6,6,9,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:m4in .14s}
.m4-tgrid{position:absolute;z-index:8;left:var(--gx,16px);right:var(--gx,16px);top:calc(100% + 8px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:10px 10px 12px;border-radius:28px;background:var(--sheet,var(--surface));border:1px solid var(--m4-glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35);transform-origin:50% 0;animation:m4tgrid .18s cubic-bezier(.3,.8,.2,1);max-height:calc(100dvh - 260px);overflow-y:auto}
@keyframes m4tgrid{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m4-tgrid{animation:none}}
.m4-tgrid-c{grid-column:1/-1;padding:6px 8px 2px;font:600 12.5px/16px var(--font);color:var(--ink-3)}
.m4-tgrid .m4-app{min-height:82px}
.m4-tgrid .m4-app-i{width:52px;height:52px;border-radius:16px}
.m4-tgrid .m4-app-i .m4-dot{position:absolute;top:2px;right:2px}
.m4-ts5 .m4-sectabs-t{position:relative;z-index:8;background:var(--bg)}
html.m4.m4fade.m4stk .m4-ts5.m4-stuck .m4-sectabs-t{background:transparent}
@media (max-width:380px){.m4-ts5 .m4-sectabs-t{gap:14px}}

/* ── 27 ott · traccia con hero (html.m4th, interruttore rw4-trackhero="off"; Research board 15) ──
   Hero a tutta larghezza senza cornice: la copertina sfocata sale sotto l'header in vetro e sfuma nel fondo (Revolut).
   Sotto, una sola riga di tab; Rights e Release come card di gruppo con → (Bumble, Mindtrip). Meno linee: niente bordi tra gruppi né sotto le tab. */
html.m4.m4th .v4-track .v4-hero{border:0;border-radius:0;background:transparent;margin:calc(-1 * var(--m4-hdh,52px)) calc(-1 * var(--gx,16px)) 0;padding:calc(var(--m4-hdh,52px) + 12px) var(--gx,16px) 20px;overflow:hidden}
html.m4.m4th .v4-track .v4-hero-bg{inset:-40px -60px 30% -60px;filter:blur(56px) saturate(1.6);opacity:.55}
html.m4.m4th .v4-track .v4-hero::after{opacity:1;background:linear-gradient(180deg,transparent 0%,transparent 40%,var(--bg) 100%)}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-top{justify-items:center;text-align:center;gap:18px}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-art{width:184px;box-shadow:0 18px 48px rgba(0,0,0,.4)}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-art .art{width:184px!important;height:184px!important}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-m{align-items:center;width:100%}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-a{justify-content:center;width:100%}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-wr{margin-top:4px}
html.m4.m4th .v4-track .v4-hero:not(.full){padding-bottom:12px}
html.m4.m4th .m4-thtabs{margin:0 calc(-1 * var(--gx,16px)) 12px;padding-top:0}
html.m4.m4th .m4-thtabs .m4-sectabs-t{border-bottom:0;gap:24px}
html.m4.m4th .v4-track .v4-tsec{margin-top:4px}
/* Overview: gruppi senza linee, sezioni come card con righe e → */
html.m4.m4th .v4-track .v4-am-s{border-top:0;padding:12px 0}
html.m4.m4th .v4-track .v4-am-s h3{font:600 16px/22px var(--font)}
html.m4.m4th .v4-track .v4-am-g{display:flex;flex-direction:column;gap:0;margin:0;padding:4px 0;border-radius:20px;background:var(--surface)}
html.m4.m4th .v4-track .v4-am-c{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;grid-template-areas:"k b ch" "s b ch";column-gap:10px;align-items:center;min-height:56px;padding:8px 16px;border-radius:0}
html.m4.m4th .v4-track .v4-am-c .k{grid-area:k;font:500 15px/20px var(--font);color:var(--ink)}
html.m4.m4th .v4-track .v4-am-c .s{grid-area:s;font:400 13px/18px var(--font)}
html.m4.m4th .v4-track .v4-am-c b{grid-area:b;font:500 15px/20px var(--font);color:var(--ink-2);text-align:right;max-width:44vw}
html.m4.m4th .v4-track .v4-am-c::after{content:"";grid-area:ch;width:8px;height:8px;border:solid var(--ink-3);border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);justify-self:end}
html.m4.m4th .v4-track .v4-am-c:active{background:var(--hover)}
html.m4.m4th .v4-track .v4-hero-bg{opacity:.6;inset:-60px -80px 20% -80px}
html.m4.m4th .v4-track .v4-hero::after{background:linear-gradient(180deg,transparent 0%,transparent 55%,var(--bg) 100%)}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-by{justify-content:center;align-self:center;max-width:100%}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-art,html.m4.m4th .v4-track .v4-hero.full .v4-hero-art .art{width:168px!important}
html.m4.m4th .v4-track .v4-hero.full .v4-hero-art .art{height:168px!important}
/* le tab coprono già Notes, Files e Chat: nell'Overview restano solo le righe che non hanno una tab */
html.m4.m4th .v4-track .v4-am-c:is([data-k="Notes"],[data-k="Versions"],[data-k="Chat"]){display:none}
/* pagine di dettaglio (Split, Agreements, Costs…): traccia piccola sopra + titolo pagina, niente hero né tab */
.m4-thsub{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 12px}
.m4-thsub-k{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 10px 0 4px;margin-left:-4px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 13px/18px var(--font);cursor:pointer;max-width:100%}
.m4-thsub-k:active{background:var(--hover)}
.m4-thsub-k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m4-thsub-k .art{border-radius:4px;flex:none}
.m4-thsub-t{margin:0;font:700 28px/34px var(--font);letter-spacing:-.01em;color:var(--ink)}
html.m4.m4th .v4-track .v4-hero:not(.grad) .v4-hero-bg,html.m4.m4th .v4-track .v4-hero:not(.grad)::after{display:block}
/* bento Revolut sulla traccia (telefono): le righe stanno direttamente nel bento, senza la card interna */
html.m4.m4th .v4-track .v4-rb .v4-am-g{background:none;padding:0;margin:0 -6px;border-radius:0}
html.m4.m4th .v4-track .v4-rb .v4-am-c{padding:8px 12px}
html.m4.m4th .v4-track .v4-rb .v4-am-b{padding:0}
html.m4.m4th .v4-track .v4-am-c,html.m4 .v4-bx :is(.row,.v3-row,.v4-tlis,.v4-agr-r,.v4-am-c),html.m4 .group :is(.row,.v3-row){border-radius:16px}
html.m4.m4th .v4-track .v4-rb .v4-am-g{margin:0}
/* 28 ott · niente alone scuro intorno alla copertina nell'hero; sotto mini player e tab bar solo una sfumatura leggera, senza blur */
html.m4.m4th .v4-track .v4-hero.full .v4-hero-art{box-shadow:none}
html.m4.m4fade .v4-docked .v4-main::after{height:calc(var(--m4-chrome) + 8px);background:linear-gradient(to top,color-mix(in oklab,var(--bg) 85%,transparent) 0%,color-mix(in oklab,var(--bg) 60%,transparent) 55%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
html.m4 .v4-lock{top:-2px;margin-left:8px}

/* ── 28 ott · hero senza la copertina sfocata dietro (faceva un alone scuro, soprattutto in tema chiaro) ── */
html.m4.m4th .v4-track .v4-hero:not(.grad) .v4-hero-bg,html.m4.m4th .v4-track .v4-hero:not(.grad)::after{display:none}

/* ── 28 ott · player e tab bar sulla stessa riga (html.m4pt, interruttore rw4-pltab="off"; copie *-pre-pltab.*) ── */
html.m4.m4pt{--m4-chrome:calc(var(--m4-gap) + var(--m4-tab) + 16px + var(--m4-safe));--m4-pt:60px}
html.m4.m4pt.m4fade{--m4-hdh:calc(52px + 52px + env(safe-area-inset-top,0px))}
html.m4.m4pt.m4-full{--m4-chrome:var(--m4-safe)}
/* ricerca fissa in alto, sotto lo switch Studio/Listen */
html.m4.m4pt .m4-hd{flex-wrap:wrap;height:auto;row-gap:8px;padding-bottom:8px}
.m4-sbar{display:none}
html.m4.m4pt .m4-sbar{display:flex;align-items:center;gap:10px;flex:1 0 100%;height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--m4-glass-btn,var(--surface-2));box-shadow:inset 0 0 0 1px var(--m4-glass-line);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);color:var(--ink-3);font:500 15px/20px var(--font);text-align:left;cursor:pointer;order:9}
html.m4.m4pt .m4-sbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.m4.m4pt .m4-sbar .ic{color:var(--ink-2);flex:none}
/* riga in basso: tab bar a sinistra, player a destra */
html.m4.m4pt .m4-fab{display:none}
html.m4.m4pt .m4-dock{right:calc(max(var(--m4-gap),env(safe-area-inset-right,0px)) + var(--m4-pt) + 8px);transition:right .28s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt .v4-docked .v4-pl,html.m4.m4pt .pl-bento .v4-docked .v4-pl{bottom:calc(var(--m4-gap) + var(--m4-safe));left:calc(100% - max(var(--m4-gap),env(safe-area-inset-right,0px)) - var(--m4-pt));height:var(--m4-pt);padding:4px;border-radius:var(--r-pill);overflow:hidden;transition:left .28s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl{grid-template-columns:1fr;place-items:center}
html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-c,html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-r,html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-m .tx{display:none}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m{padding:0;border-radius:var(--r-pill)}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art{width:50px!important;height:50px!important;border-radius:50%!important}
/* allargato: il player prende la riga, la tab bar resta con la sola tab attiva */
html.m4.m4pt.m4pt-x .m4-dock{right:calc(100% - max(var(--m4-gap),env(safe-area-inset-left,0px)) - var(--m4-tab))}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab{padding:4px}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>a:not([aria-current="page"]){display:none}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab:not(:has(>a[aria-current="page"]))>a:first-child{display:flex}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>.m4-slot>.ic{display:none}
html.m4.m4pt.m4pt-x .v4-docked .v4-pl{left:calc(max(var(--m4-gap),env(safe-area-inset-left,0px)) + var(--m4-tab) + 8px);padding:4px 6px 4px 5px}
html.m4.m4pt.m4pt-x .v4-docked .v4-pl .v4-pl-m{padding-right:8px}
html.m4.m4pt .m4-hd3 .m4-sbar{grid-column:1/-1;min-width:0;width:100%;box-sizing:border-box}
/* tab ristretta (player allargato): sempre un cerchio perfetto, icona al centro, senza la freccia della tab che cambia */
html.m4.m4pt.m4pt-x .m4-dock{right:auto;width:var(--m4-tab)}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab{flex:none;width:var(--m4-tab);height:var(--m4-tab);padding:4px;box-sizing:border-box;justify-content:center}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>a{flex:none;width:100%;height:100%;aspect-ratio:1;border-radius:50%;padding:0;gap:0;justify-content:center;align-items:center}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>.m4-slot>:not(.m4-ti){display:none!important}
/* ── 28 ott · niente tagliato in alto: header, pannelli e popup a tutto schermo lasciano lo spazio della barra di stato; 12px liberi sotto la ricerca ── */
html.m4.m4pt .m4-hd{padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:12px}
html.m4.m4pt.m4fade{--m4-hdh:calc(6px + 44px + 8px + 44px + 12px + env(safe-area-inset-top,0px))}
html.m4.m4pt.m4fade .m4-hd::before{height:calc(100% + 16px);background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in oklab,var(--bg) 90%,transparent) 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}
html.m4 .v3-app.has-panel .panel{padding-top:env(safe-area-inset-top,0px);box-sizing:border-box}
html.m4 .popup:not(.confirm){padding-top:env(safe-area-inset-top,0px);box-sizing:border-box}

/* ── 28 ott · player in riga: griglia delle sezioni a tutta larghezza, animazione fluida, ricerca che sparisce scorrendo, Chats come WhatsApp (copie *-pre-wa.*) ── */
html.m4.m4pt .m4-dock .m4-apps{width:calc(100% + var(--m4-pt) + 8px)}
/* animazione: il player resta in flex (copertina a sinistra, il resto si rivela mentre si allarga), le tab non attive si chiudono invece di sparire di colpo */
html.m4.m4pt .v4-docked .v4-pl,html.m4.m4pt .pl-bento .v4-docked .v4-pl{display:flex!important;align-items:center;gap:4px;transition:left .3s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m{flex:1 1 auto;min-width:50px;justify-content:flex-start}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .tx{display:flex!important;min-width:0;opacity:1;transition:opacity .2s .1s}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-c{display:flex!important;flex:none;opacity:1;transition:opacity .2s .1s}
html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-m .tx,html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-c{opacity:0;pointer-events:none;transition:opacity .1s}
html.m4.m4pt .m4-dock{transition:right .3s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt.m4pt-x .m4-dock{right:calc(100% - max(var(--m4-gap),env(safe-area-inset-left,0px)) - var(--m4-tab));width:auto}
html.m4.m4pt .m4-dock .m4-tab>a{transition:flex-basis .3s cubic-bezier(.3,.8,.2,1),opacity .15s,background .15s}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>a:not([aria-current="page"]){display:flex;flex:0 0 0;min-width:0;width:0;opacity:0;overflow:hidden;padding:0;pointer-events:none}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab:not(:has(>a[aria-current="page"]))>a:first-child{flex:1 1 auto;width:auto;opacity:1}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab>a[aria-current="page"]{flex:1 1 auto;width:auto;aspect-ratio:auto}
/* ricerca che sparisce scorrendo (WhatsApp): la riga si chiude, l'header si accorcia, le barre fisse risalgono */
html.m4.m4pt .m4-hd .m4-sbar{transition:height .22s,opacity .18s,margin .22s}
html.m4.m4pt.m4-sbh .m4-hd .m4-sbar{height:0;opacity:0;margin-top:-8px;pointer-events:none;overflow:hidden;box-shadow:none}
html.m4.m4pt.m4-sbh .m4-sectabs,html.m4.m4pt.m4-sbh .v3-tabs-sticky{top:-52px}
/* Chats: la lista scorre con la pagina, non dentro un riquadro (titolo e filtri scorrono via come in WhatsApp) */
html.m4 .v3-main:has(>.v4-chats:not(.has-cur)){overflow-y:auto}
html.m4 .v4-chats:not(.has-cur){height:auto!important;min-height:0;overflow:visible}
html.m4 .v4-chats:not(.has-cur) .v4-clist{height:auto!important;max-height:none;overflow:visible}
html.m4 .v4-chats:not(.has-cur) .v4-clist-b{height:auto!important;max-height:none;overflow:visible;flex:none}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m{flex:1 1 0%}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-c{width:auto!important;min-width:0;flex:0 0 auto!important;margin-left:auto}
/* Chats su telefono: una sola ricerca, quella in alto (cerca chat e messaggi); la ricerca della pagina è nascosta */
html.m4.m4pt .v4-chats .v4-cl-search{display:none}
html.m4.m4pt .m4-sbar-in{cursor:text}
html.m4.m4pt .m4-sbar-in input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:500 15px/20px var(--font);outline:none;padding:0}
html.m4.m4pt .m4-sbar-in input::placeholder{color:var(--ink-3)}
.m4-sbar-x{display:grid;place-items:center;width:32px;height:32px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}

/* ── 28 ott · anello di avanzamento intorno alla copertina del player (segue il player: a destra da chiuso, a sinistra da aperto) ── */
.m4-ring{display:none}
html.m4.m4pt .m4-ring{display:block;position:fixed;z-index:46;pointer-events:none;width:56px;height:56px;bottom:calc(var(--m4-gap) + var(--m4-safe) + 2px);left:calc(100% - max(var(--m4-gap),env(safe-area-inset-right,0px)) - var(--m4-pt) + 2px);transform:rotate(-90deg);transition:left .3s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt.m4pt-x .m4-ring{left:calc(max(var(--m4-gap),env(safe-area-inset-left,0px)) + var(--m4-tab) + 8px + 2px)}
.m4-ring circle{fill:none;stroke-width:2.5}
.m4-ring .bg{stroke:color-mix(in oklab,var(--ink) 14%,transparent)}
.m4-ring .fg{stroke:var(--accent,var(--blue));stroke-linecap:round;transition:stroke-dashoffset .5s linear}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art{width:46px!important;height:46px!important;margin:2px}
html.m4.m4-full .m4-ring,html.m4 .v3-app.has-panel .m4-ring{display:none}
/* ── 28 ott · Calendar su telefono scorre con la pagina (prima la pagina era bloccata) ── */
html.m4 .v3-main:has(.v4-cal){overflow-y:auto;overscroll-behavior-y:contain}
html.m4 .v3-main:has(>.v4-chats:not(.has-cur)){overscroll-behavior-y:contain}
/* anello: solo lo svg ruota; mentre suona, da chiuso, segno di pausa al centro della copertina (velo leggero, come Play sulle copertine) */
html.m4.m4pt .m4-ring{transform:none}
.m4-ring>svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.m4-ring-ic svg{width:18px;height:18px}
.m4-ring-ic{position:absolute;inset:3px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;opacity:1;transition:opacity .15s}
html.m4.m4pt.m4pt-x .m4-ring-ic{opacity:0}
html.m4.m4pt:not(.m4pt-x) .v4-docked .v4-pl{touch-action:pan-y}
/* ── 28 ott · avanzamento sul bordo della copertina (niente anello separato né traccia grigia) + tab ristretta sempre tonda ── */
html.m4.m4pt .m4-ring{display:none!important}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art{width:50px!important;height:50px!important;margin:0;position:relative;overflow:visible}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--accent,var(--blue)) calc(var(--m4-pf,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
/* mentre suona, da chiuso: segno di pausa al centro della copertina su velo leggero */
html.m4.m4pt.m4-plon:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-m .art::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(#fff,#fff) calc(50% - 4px) 50%/4px 16px no-repeat,linear-gradient(#fff,#fff) calc(50% + 4px) 50%/4px 16px no-repeat,rgba(0,0,0,.28)}
html.m4.m4pt.m4pt-x .m4-dock .m4-tab{gap:0;overflow:hidden;width:var(--m4-tab)!important;min-width:var(--m4-tab);max-width:var(--m4-tab);height:var(--m4-tab);aspect-ratio:1;border-radius:50%}
/* copertina 43px + avanzamento appena fuori dal bordo (stesso ingombro totale di 50px) */
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art{width:43px!important;height:43px!important;margin:3.5px}
html.m4.m4pt .v4-docked .v4-pl .v4-pl-m .art::after{inset:-3.5px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px))}
/* ── 28 ott · Calendar su telefono: due righe (Mese ▾ · Today · vista · +, poi la settimana), Attention come riga in cima all'agenda (rw4-calhd="off" → com'era) ── */
html.m4 .v4-cal-top.m4-slim>h1,html.m4 .v4-cal-top.m4-slim>.btn.primary{display:none}
html.m4 .v4-cal-top.m4-slim:not(:has(>:not(h1):not(.btn.primary):not(span)))>*{display:none}
.m4-cal-slim{gap:8px;padding:8px 0 4px}
.m4-cal-mo{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer}
.m4-cal-mo .t-title{margin:0;font:700 28px/34px var(--font)}
.m4-cal-mo .ic{color:var(--ink-3)}
.m4-cal-slim .ibtn{width:44px;height:44px}
.m4-cal-add{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--ink-inv);display:grid;place-items:center;border:0;cursor:pointer}
.m4-wk.m4-wk-sw{grid-template-columns:repeat(7,minmax(0,1fr));touch-action:pan-y}
.m4-cal-att{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0 0 12px;padding:0 16px;border:0;border-radius:16px;background:var(--warn-soft,var(--surface));color:var(--ink);font:500 15px/20px var(--font);cursor:pointer;text-align:left}
.m4-cal-att>span{flex:1}
.m4-cal-att>.ic:first-child{color:var(--warn)}
.m4-cal-att>.ic:last-child{color:var(--ink-3)}
html.m4 .v4-cal-top.m4-slim{display:none}
.m4-cal-mo{min-width:0}
.m4-cal-mo .t-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── 28 ott · sfumatura in alto uguale a quella in basso: niente blur, stessa scala di trasparenza, appena oltre l'header (e più corta quando la ricerca sparisce) ── */
html.m4.m4pt.m4fade .m4-hd::before{height:calc(100% + 8px);background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 85%,transparent) 0%,color-mix(in oklab,var(--bg) 60%,transparent) 55%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
html.m4.m4pt.m4-sbh .m4-hd{padding-bottom:4px}
/* ── 28 ott · header a una riga con Search fisso (html.m4hs, interruttore rw4-hdsearch="off"; copie *-pre-hdsearch.*): niente barra larga, niente ⓘ; riepilogo in fondo alla pagina ── */
html.m4.m4pt.m4hs.m4fade{--m4-hdh:calc(6px + 44px + 12px + env(safe-area-inset-top,0px))}
html.m4.m4pt.m4hs .v4-chats .v4-cl-search{display:flex}
html.m4.m4hs .m4-rcin{display:flex;flex-direction:column;gap:16px;padding:32px var(--gx,16px) 24px}
html.m4.m4hs .m4-rcin:empty{display:none}
html.m4.m4hs .m4-rctop{display:flex;width:calc(100% - 2 * var(--gx,16px));margin:8px var(--gx,16px) 0;box-sizing:border-box}
/* ── 28 ott · player chiuso = copertina grande nel cerchio, anello di avanzamento sempre fuori dalla copertina e attaccato (come SoundCloud): traccia vuota che si riempie in accento, spessore 3px costante aperto e chiuso. Animazione solo con transform (la copertina resta 44px nel layout e da chiusa scala a 54px); lo spessore si compensa con --m4-rw così dopo la scala resta 3px. (html.m4plf, interruttore rw4-plfill="off"; copie *-pre-plfill*.) ── */
@property --m4-rw{syntax:'<length>';inherits:true;initial-value:3px}
html.m4.m4pt.m4plf .v4-docked .v4-pl{transition:left .3s cubic-bezier(.3,.8,.2,1),background-color .2s,border-color .2s}
html.m4.m4pt.m4plf .v4-docked .v4-pl .v4-pl-m .art{--m4-rw:3px;width:44px!important;height:44px!important;margin:3px;transform:scale(1);transform-origin:50% 50%;will-change:transform;transition:transform .3s cubic-bezier(.3,.8,.2,1),--m4-rw .3s cubic-bezier(.3,.8,.2,1)}
html.m4.m4pt.m4plf .v4-docked .v4-pl .v4-pl-m .art::after{inset:calc(var(--m4-rw) * -1);
  background:conic-gradient(var(--accent,var(--blue)) calc(var(--m4-pf,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--m4-rw)),#000 calc(100% - var(--m4-rw)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--m4-rw)),#000 calc(100% - var(--m4-rw)))}
html.m4.m4pt.m4plf:not(.m4pt-x) .v4-docked .v4-pl{border-color:transparent;background:transparent;box-shadow:none}
html.m4.m4pt.m4plf:not(.m4pt-x) .v4-docked .v4-pl .v4-pl-m .art{transform:scale(1.22727);--m4-rw:2.4444px}
/* ── 28 ott · player allargato su telefono: Send (Studio) / Share (Listen) al posto di Next; Next resta nel player a tutto schermo (html.m4psd, interruttore rw4-plsend="off"; copie *-pre-plsend.*) ── */
.v4-pl-sh{display:none}
html.m4.m4psd .v4-pl-btns .ibtn:nth-child(4){display:none}
html.m4.m4psd .v4-pl-btns .ibtn.v4-pl-sh{display:grid;place-items:center}
/* ── 28 ott · player allargato come [untitled] (refs/mobbin/v4-player/untitled-mini-ios.webp): copertina con lo stesso margine sopra, sotto e a sinistra (5px dal bordo), 8px tra anello e titolo, ultimo pulsante centrato come in un cerchio alto quanto la pillola (icona a 20px dal bordo). Niente traccia grigia dell'anello: solo il blu che avanza. (copie *-pre-plpad.*) ── */
html.m4.m4pt.m4plf.m4pt-x .v4-docked .v4-pl{padding:4px 7px 4px 4px}
html.m4.m4pt.m4plf .v4-docked .v4-pl .v4-pl-m{gap:8px}
/* ── 28 ott · player in basso su telefono: mai un cerchio/sfondo dietro i pulsanti (Play, Send/Share, copertina). Su touch l'hover resta "appiccicato" dove hai toccato: allargando il player dal cerchio, il pulsante che compare sotto il dito prendeva lo sfondo di hover. Vale per hover, tocco, focus e premuto; resta solo l'anello di focus da tastiera. (copie *-pre-plnohover.*) ── */
html.m4 .v4-docked .v4-pl button,html.m4 .v4-docked .v4-pl button:hover,html.m4 .v4-docked .v4-pl button:active,html.m4 .v4-docked .v4-pl button:focus,html.m4 .v4-docked .v4-pl button[aria-pressed="true"]{background:transparent!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
html.m4 .v4-docked .v4-pl button:focus:not(:focus-visible){outline:none}
/* ── 28 ott · scrub dal player allargato: trascinando, titolo e artisti lasciano il posto a tempo + waveform (stile unico .v4-plw); rw4-scrub="off" (copie *-pre-scrub.*) ── */
html.m4.m4pt.m4pt-x .v4-docked .v4-pl{touch-action:pan-y}
html.m4-scrub .v4-docked .v4-pl .v4-pl-m .tx{opacity:0!important;transition:opacity .12s}
html.m4-scrub{user-select:none;-webkit-user-select:none}
.m4-scrub-o{position:fixed;z-index:48;display:flex;flex-direction:column;justify-content:center;gap:4px;pointer-events:none;animation:m4ScrubIn .12s ease-out}
.m4-scrub-o>span{font:600 13px/16px var(--font);color:var(--ink)}
.m4-scrub-o>span em{font-style:normal;font-weight:500;color:var(--ink-3)}
.m4-scrub-o .v4-plw{height:22px;cursor:default}
@keyframes m4ScrubIn{from{opacity:0}to{opacity:1}}
/* scrub senza scatti: niente transizioni sulle barre mentre il dito si muove; il titolo torna con la stessa dissolvenza con cui se ne va */
.m4-scrub-o .v4-plw i::before,.m4-scrub-o .v4-plw i::after{transition:none}
html.m4 .v4-docked .v4-pl .v4-pl-m .tx{transition:opacity .12s}
/* suggerimento dello scrub, una sola volta: la riga degli artisti diventa "Drag to scrub" e poi torna */
html.m4 .v4-docked .v4-pl-m .tx>span{position:relative}
html.m4.m4-scrubhint.m4pt-x .v4-docked .v4-pl-m .tx>span{color:transparent}
html.m4.m4-scrubhint.m4pt-x .v4-docked .v4-pl-m .tx>span::after{content:"Drag to scrub";position:absolute;left:0;top:0;color:var(--ink-2);white-space:nowrap;animation:m4ScrubIn .2s ease-out}