/* ============================================================
   BARRA LATERALE — il fondo, e la barra compressa

   L'«Aurora compatta» dell'artifact «Aurora e Risograph»: timer e
   settimana nel vetro, la riga utente sotto. Il dettaglio non sparisce,
   si sposta dove serve — nel tooltip della cifra e dentro il menu utente.
   Prefisso `sf-`, solo token.

   La barra compressa («rail») e' la stessa barra a 76px: le voci restano
   con la sola icona e il fondo diventa tre pulsanti tondi.
   ============================================================ */

.sf-foot{padding-top:12px;display:flex;flex-direction:column;gap:6px;}

/* ---- «Aurora compatta»: il riquadro, le luci, il vetro ----
   Le luci sono quattro tondi sfocati dei colori del marchio che vanno e
   vengono; mentre il timer corre vanno piu' veloci. Il vetro sta sopra e
   si legge in tutti e due i temi (`--glass`, `--glass-line`, `--glass-ink`). */
.sf-au{position:relative;border-radius:16px;padding:6px;isolation:isolate;overflow:hidden;background:var(--primary-tint);}
.sf-au-sky{position:absolute;inset:-40%;z-index:-1;filter:blur(18px) saturate(1.15);}
.sf-au-sky i{position:absolute;border-radius:50%;}
.sf-au-sky .b1{width:62%;height:62%;left:4%;top:8%;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 95%,transparent),transparent 68%);animation:sf-sk1 13s ease-in-out infinite alternate;}
.sf-au-sky .b2{width:66%;height:66%;left:40%;top:2%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 95%,transparent),transparent 68%);animation:sf-sk2 17s ease-in-out infinite alternate;}
.sf-au-sky .b3{width:60%;height:60%;left:30%;top:48%;background:radial-gradient(circle,color-mix(in srgb,var(--pink) 55%,transparent),transparent 68%);animation:sf-sk3 21s ease-in-out infinite alternate;}
.sf-au-sky .b4{width:58%;height:58%;left:0;top:44%;background:radial-gradient(circle,var(--primary-mid),transparent 68%);animation:sf-sk4 15s ease-in-out infinite alternate;}
.sf-au.run .sf-au-sky i{animation-duration:5s;}
@keyframes sf-sk1{to{transform:translate(38%,26%) scale(1.2);}}
@keyframes sf-sk2{to{transform:translate(-34%,30%) scale(.85);}}
@keyframes sf-sk3{to{transform:translate(-24%,-40%) scale(1.25);}}
@keyframes sf-sk4{to{transform:translate(40%,-20%) scale(1.1);}}
.sf-au-glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35);border:1px solid var(--glass-line);border-radius:12px;padding:8px 10px 9px 8px;}
.sf-au-row{display:flex;align-items:center;gap:10px;}
/* Il play: pieno di corallo da fermo (di notte scuro), un gradiente che
   scorre mentre il timer corre. */
.sf-au-play{position:relative;width:34px;height:34px;border-radius:10px;border:0;background:var(--play-idle);box-shadow:var(--play-idle-shadow);color:var(--on-accent);display:grid;place-items:center;overflow:hidden;flex:none;cursor:pointer;}
.sf-au-play::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--primary),var(--amber),var(--primary),var(--primary-deep));background-size:300% 100%;opacity:0;transition:opacity .4s;animation:sf-au-slide 3s linear infinite;}
.sf-au.run .sf-au-play::before{opacity:1;}
.sf-au-play svg{position:relative;width:13px;height:13px;fill:currentColor;}
.sf-au-play:focus-visible,.sf-au-main:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
@keyframes sf-au-slide{to{background-position:-300% 0;}}
/* La cifra: Inter con le cifre tabellari, come le ore in tutta l'app, cosi'
   il cronometro non balla mentre scorre. */
.sf-au-main{flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;}
.sf-au-big{white-space:nowrap;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.sf-au-big small{font-size:11px;font-weight:600;color:var(--glass-ink);letter-spacing:0;}
.sf-au-lab{font-size:10.5px;font-weight:600;color:var(--glass-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-au-lab code{color:var(--primary-dark);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.sf-au-prog{height:3px;border-radius:2px;background:color-mix(in srgb,var(--text) 10%,transparent);margin-top:8px;overflow:hidden;}
.sf-au-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--primary));border-radius:2px;transition:width .9s cubic-bezier(.2,.8,.2,1);}
/* La riga utente sta sullo stesso fondo, sotto al vetro. */
.sf-au .sf-urow{padding:7px 2px 1px;gap:6px;}
.sf-au .sf-user{padding:0;gap:9px;border:0;}
.sf-au .sf-user:hover,.sf-au .sf-user[aria-expanded="true"]{background:none;}
.sf-au .sf-utxt b{font-size:13px;line-height:1.2;}
.sf-au .sf-utxt small{font-size:11px;line-height:1.3;color:var(--glass-ink);}
.sf-au .sf-bell{width:30px;height:30px;border-radius:10px;border-color:var(--glass-line);background:var(--glass);color:var(--text);}
.sf-au .sf-bell:hover{background:var(--card);}
.sf-au .sf-bell svg{width:15px;height:15px;}
.sf-au .sf-bell .cnt{top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:13px;border-color:var(--primary-tint);}
@media (prefers-reduced-motion:reduce){.sf-au-sky i,.sf-au-play::before{animation:none;}}

/* ---- la riga utente: il profilo e la campanella, due pulsanti ---- */
.sf-urow{display:flex;align-items:center;gap:4px;min-width:0;}
.sf-user{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:11px;padding:6px 8px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;}
.sf-user:hover,.sf-user[aria-expanded="true"]{background:var(--hover);}
.sf-user[aria-expanded="true"]{border-color:var(--border);}
.sf-user .avatar{width:32px;height:32px;}
.sf-utxt{flex:1;min-width:0;}
.sf-utxt b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-utxt small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* La campanella resta anche a zero: e' il posto dove si va a guardare, non
   un avviso che compare e sparisce. Il numero si aggiunge quando c'e'. */
/* Il pulsante e' un quadrato con la sua superficie, e il numero e' un
   pallino pieno appoggiato all'angolo: il segno che si riconosce senza
   leggerlo. Prima il pallino era da nove pixel e mezzo fuori dal bordo;
   adesso e' abbastanza grande da contenere una cifra e sta dentro
   all'ingombro della barra, cosi' non lo taglia niente. Il bordo del
   colore della barra lo stacca dal pulsante che ha sotto. */
.sf-bell{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:11px;
  border:1px solid var(--border);background:var(--card);color:var(--neutral-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
  transition:background .12s,border-color .12s,color .12s;}
.sf-bell:hover{background:var(--hover);color:var(--text);}
.sf-bell[aria-expanded="true"]{background:var(--hover);border-color:var(--primary);color:var(--text);}
.sf-bell svg{width:17px;height:17px;}
/* Qualcosa di scaduto o di oggi: si accende la campanella. Il numero non
   cambia — e' sempre pieno — perche' quello che dice e' quanti, non quanto
   urgenti. */
.sf-bell.on{color:var(--primary-dark);}
/* Il primario scuro e non il pieno chiaro: un pallino piccolo con dentro
   una cifra bianca ha bisogno del tono piu' carico per reggersi, e di
   notte quello chiaro se la mangerebbe. */
.sf-bell .cnt{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  border-radius:20px;background:var(--primary-deep);color:var(--on-accent);border:2px solid var(--sidebar);
  font-size:11px;font-weight:700;line-height:16px;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;}
/* Il pallino e' sempre pieno, anche quando non c'e' niente di urgente: con
   la coppia tenue si leggeva come una decorazione e non come un numero da
   guardare. La differenza fra «c'e' qualcosa per oggi» e «c'e' qualcosa»
   resta, ma la porta la campanella sotto (`.sf-bell.on`), non il numero. */

/* ---- il menu: sopra la riga utente, appeso al body per non essere
   tagliato dalla barra (che ha overflow nascosto) ---- */
.sf-menu{position:fixed;z-index:650;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);padding:6px;min-width:240px;}
.sf-mhead{padding:10px 10px 11px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);margin-bottom:6px;}
.sf-mhead .avatar{width:32px;height:32px;}
.sf-mtxt{min-width:0;flex:1;}
.sf-mhead b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-mhead small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-role{margin-left:auto;font-size:9.5px;font-weight:700;background:var(--primary-soft);color:var(--primary-dark);padding:3px 7px;border-radius:6px;white-space:nowrap;flex-shrink:0;max-width:112px;overflow:hidden;text-overflow:ellipsis;}
.sf-mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:9px;font-size:12.5px;font-weight:500;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;text-decoration:none;}
.sf-mi:hover{background:var(--hover);}
.sf-mi svg{width:16px;height:16px;color:var(--neutral-ink);flex-shrink:0;}
.sf-mi .cnt{margin-left:auto;background:var(--primary);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:20px;padding:1px 6px;font-variant-numeric:tabular-nums;}
.sf-mi .sw{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--track);border-radius:20px;padding:2px 8px;}
.sf-msep{height:1px;background:var(--border);margin:6px 0;}
.sf-mi.danger{color:var(--red-dark);}
.sf-mi.danger svg{color:var(--red-dark);}
.sf-mi.danger:hover{background:var(--red-soft);}

/* ---- il riquadro delle notifiche ----
   Stessa famiglia del menu utente: appeso al body, sopra la campanella,
   con la misura decisa dal JS perche' dipende da dov'e' il pulsante. */
.sfn-panel{position:fixed;z-index:660;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden;}
/* Il fuoco ci arriva da codice per far partire Tab ed Esc da dentro: il
   contorno direbbe «sei qui» di un riquadro intero, che non e' un comando. */
.sfn-panel:focus{outline:none;}
.sfn-head{display:flex;align-items:center;gap:8px;padding:11px 10px 10px 13px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sfn-head b{font-size:13px;font-weight:600;color:var(--text);}
.sfn-cnt{background:var(--primary);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums;}
.sfn-x{margin-left:auto;width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sfn-x:hover{background:var(--hover);color:var(--text);}
.sfn-x svg{width:14px;height:14px;}
.sfn-body{overflow-y:auto;padding:5px;min-height:0;}
.sfn-grp{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:8px 8px 5px;}
.sfn-row{display:flex;align-items:stretch;gap:2px;border-radius:10px;}
.sfn-row:hover{background:var(--hover);}
.sfn-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;border:0;background:transparent;padding:8px;border-radius:10px;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;}
.sfn-ico{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--track);color:var(--neutral-ink);}
.sfn-ico svg{width:12px;height:12px;}
.sfn-row.late .sfn-ico{background:var(--red-soft);color:var(--red-dark);}
.sfn-row.now .sfn-ico{background:var(--primary-soft);color:var(--primary-dark);}
.sfn-txt{min-width:0;flex:1;}
.sfn-txt b{font-size:12px;font-weight:500;line-height:1.35;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sfn-txt small{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sfn-row.late .sfn-txt small{color:var(--red-dark);font-weight:600;}
.sfn-done{align-self:center;width:26px;height:26px;margin-right:6px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.sfn-done:hover{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark);}
.sfn-done svg{width:13px;height:13px;}
.sfn-more{padding:8px 10px 6px;font-size:10.5px;color:var(--muted);}
.sfn-empty{padding:26px 18px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.sfn-empty svg{width:22px;height:22px;color:var(--dim);margin-bottom:5px;}
.sfn-empty b{font-size:12.5px;font-weight:600;color:var(--text);}
.sfn-empty small{font-size:11px;color:var(--muted);line-height:1.45;}

/* ---- la barra compressa ---- */
.sf-railbtn{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.sf-railbtn:hover{background:var(--hover);color:var(--text);}
.sf-railbtn svg{width:14px;height:14px;}
.sf-railonly{display:none;}
.app.rail{grid-template-columns:76px minmax(0,1fr);}
.app.rail .sidebar{padding:18px 8px 12px;}
.app.rail .brand{flex-direction:column;justify-content:center;gap:8px;padding:5px 0 14px;}
.app.rail .brand-name{display:none;}
.app.rail .sf-railbtn{margin:0;}
.app.rail .nav-item{justify-content:center;padding:9px;}
.app.rail .nav-item span{display:none;}
.app.rail .sf-au{background:none;padding:0;overflow:visible;}
.app.rail .sf-au-sky,.app.rail .sf-au-glass,.app.rail .sf-utxt{display:none;}
.app.rail .sf-urow{flex-direction:column-reverse;gap:8px;}
.app.rail .sf-bell{width:34px;height:34px;border-radius:11px;}
.app.rail .sf-railonly{display:flex;}
.app.rail .sf-foot{align-items:center;gap:8px;padding-top:10px;}
.app.rail .sf-user{justify-content:center;padding:4px;width:auto;}
.sf-ring{width:42px;height:42px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--primary-dark);background:var(--card);position:relative;border:0;cursor:pointer;font-family:inherit;}
.sf-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p,0)*1%),var(--track) 0);}
.sf-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card);}
.sf-ring b{position:relative;z-index:1;font-variant-numeric:tabular-nums;}
.sf-railtimer{position:relative;width:42px;height:42px;border-radius:12px;border:0;background:var(--primary-tint);box-shadow:inset 0 0 0 1px var(--primary-mid);flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--primary-dark);cursor:pointer;font-family:inherit;}
.sf-railtimer small{font-size:8.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.sf-railtimer svg{width:12px;height:12px;}
.sf-railplay{width:42px;height:42px;border-radius:12px;background:var(--primary);color:var(--on-accent);border:0;align-items:center;justify-content:center;cursor:pointer;}
.sf-railplay svg{width:15px;height:15px;fill:currentColor;stroke-width:1;}
.sf-railplay:hover{background:var(--primary-dark);}
.nav-noresult{padding:14px;font-size:13px;color:var(--muted);}

/* ============================================================
   IL CASSETTO — la barra laterale sotto ai 900

   Sopra i 900 la barra e' una colonna del guscio e questa parte non
   esiste. Sotto, esce dal flusso e scorre sopra al contenuto: la
   larghezza serve tutta alla pagina, e la barra si chiama quando serve.

   **Non e' la barra compressa a 76px.** Quella e' una scelta di chi
   lavora su uno schermo grande e vuole piu' spazio tenendo le icone a
   vista; su un telefono da 375 pixel sarebbe un quinto dello schermo
   occupato da una colonna di icone, cioe' il difetto di prima con
   centoquaranta pixel in meno. Sotto ai 900 la barra compressa si spegne
   — lo fa `sfRailAttivo()` in `sidebar-foot.js`, non il foglio, se no
   qui sotto ci sarebbe da disfare a mano ognuna delle dodici regole di
   `.app.rail`, e la prima che si dimentica non la vede nessuno.

   Chiuso, il cassetto **non e' `display:none`**: e' spostato fuori e
   nascosto con `visibility`, cosi' l'apertura e' un movimento e non
   un'apparizione, e chi naviga da tastiera non ci finisce dentro mentre
   e' chiuso.
   ============================================================ */

/* Il richiamo del cassetto sta nella testata, che e' l'unica cosa che si
   vede quando la barra e' fuori. Sopra i 900 non c'e': la barra e' li'.
   La regola di base sta **prima** della soglia, se no a parita' di peso
   vincerebbe lei e il pulsante non comparirebbe mai. */
.topbar-menu{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--muted);cursor:pointer;}
.topbar-menu:hover{background:var(--hover);color:var(--text);}
.topbar-menu svg{width:17px;height:17px;}
.nav-scrim{display:none;}

@media (max-width:900px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:248px;max-width:84vw;z-index:520;
    transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility .18s;
    box-shadow:var(--shadow-lift);}
  .app.nav-open .sidebar{transform:none;visibility:visible;}
  .nav-scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:510;
    opacity:0;pointer-events:none;transition:opacity .18s ease;}
  .app.nav-open .nav-scrim{opacity:1;pointer-events:auto;}
  /* Il pulsante che comprime la barra non ha senso dentro a un cassetto:
     li' la barra o c'e' tutta o non c'e'. */
  .sf-railbtn{display:none;}
  .topbar-menu{display:inline-flex;}
}
/* Il movimento si spegne per chi lo ha chiesto: resta l'apertura secca. */
@media (prefers-reduced-motion:reduce){
  .sidebar,.nav-scrim{transition:none;}
}