/* Proposta A: libreria serale. Stile comune a tutte le superfici Watchbound. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-400-800.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
html[data-tema="watchbound"] {
  --bg:#171c24; --bg-2:#202733; --bg-3:#2a3442; --panel:#202733; --panel-2:#2a3442;
  --paper:#f3f2eb; --paper-2:#dce1ed; --txt:#f3f2eb; --txt-2:#bdc7d6;
  --line:#3e4a5c; --line-forte:#77879e; --accent:#c3b7ff; --accent-alto:#ded7ff; --accent-scuro:#251b49;
  --hot:#ffb5a5; --warm:#f2d199; --ok:#9fd8c7; --radius:12px; --shadow:none; --shadow-alto:none; --luce:none;
  min-height:100%; background:var(--bg); color-scheme:dark; scrollbar-color:var(--line-forte) var(--bg);
}
body { background:var(--bg); color:var(--txt); font:16px/1.6 "Manrope",sans-serif; caret-color:var(--accent); }
a { text-underline-offset:.2em; text-decoration-thickness:1px; }
::selection { background:var(--accent); color:var(--accent-scuro); }
::placeholder { color:var(--txt-2); opacity:1; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { border:3px solid var(--bg); background:var(--line-forte); border-radius:8px; }
h1,h2,h3,.brand,.title,.marchio { font-family:"Bricolage Grotesque","Manrope",sans-serif; letter-spacing:-.025em; text-wrap:balance; }
h1,h2,h3,p { overflow-wrap:anywhere; }
button,input,select { font-family:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
:is(a,button,input,select,summary):focus-visible { outline:3px solid var(--accent-alto); outline-offset:4px; }
button:disabled { opacity:.55; cursor:not-allowed; }
[id] { scroll-margin-top:180px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:1000; padding:12px 20px; background:var(--paper); color:var(--bg); }
.skip-link:focus { top:12px; }
.topbar { background:var(--bg); backdrop-filter:none; padding:0; border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1760px; padding:0 40px; }
.topbar-row { min-height:80px; gap:16px; flex-wrap:nowrap; }
.topbar-row + .topbar-row { min-height:104px; margin:0; padding:16px 0; border-top:1px solid var(--line); }
.marchio { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin:0 26px 0 0; padding:0; font-size:22px; font-weight:750; text-transform:none; white-space:nowrap; }
.marchio img { width:34px; height:34px; }
.marchio span { display:inline; position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:nowrap; }
.marchio:hover { color:var(--accent-alto); }
.spazi { display:flex; gap:6px; align-items:center; }
.spazi a { display:grid; place-items:center; min-height:44px; padding:8px 18px; font-size:15px; font-weight:700; border:0; border-radius:8px; color:var(--txt-2); }
.spazi a.on { background:var(--accent); color:var(--accent-scuro); }
.spazi a:hover { background:var(--bg-3); color:var(--txt); }
.spazi a.on:hover { background:var(--accent-alto); color:var(--accent-scuro); }
.lingua-switch { display:flex; border:1px solid var(--line); border-radius:8px; overflow:visible; }
.lingua-switch button { min-width:44px; min-height:44px; padding:8px; color:var(--txt-2); border-radius:6px; }
.lingua-switch button.on { background:var(--bg-3); color:var(--txt); }
.icon-btn { width:44px; height:44px; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:8px; color:var(--txt); }
.brand-box { flex:1 1 auto; min-width:0; gap:4px; }
.brand { position:static; width:auto; height:auto; overflow:visible; clip-path:none; font-size:32px; font-weight:750; line-height:1.15; }
.brand-sub { white-space:normal; overflow:visible; font-size:13px; }
.search,.select { background:var(--bg-2); border:1px solid var(--line-forte); border-radius:8px; min-height:46px; color:var(--txt); font-size:16px; }
.search { width:280px; flex:0 1 280px; }
.campo { gap:8px; }
.campo-eti { font-size:13px; }
.select { max-width:100%; }
.btn { min-height:44px; padding:10px 18px; border:1px solid var(--line-forte); background:transparent; color:var(--txt); border-radius:8px; font:700 14px/1.45 "Manrope",sans-serif; letter-spacing:0; text-transform:none; box-shadow:none; }
.btn:hover { background:var(--bg-3); border-color:var(--accent); box-shadow:none; }
.btn-big { min-height:52px; padding:13px 24px; font-size:15px; background:var(--accent); border-color:var(--accent); color:var(--accent-scuro); }
.btn-big:hover { background:var(--accent-alto); color:var(--accent-scuro); }
.btn-alt { background:transparent; color:var(--txt); }
.btn-ghost { color:var(--txt); }
.btn-danger { color:var(--hot); }
.chip { min-height:44px; border-color:var(--line-forte); color:var(--txt-2); border-radius:8px; font:700 14px "Manrope",sans-serif; }
.chip.on { background:var(--accent); color:var(--accent-scuro); border-color:var(--accent); }
.pagina-centro { max-width:1280px; padding:64px 32px 88px; }
.pagina-centro.stretta,.pagina-centro.guida { max-width:880px; }
#benvenuto:not(.hidden) { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px 72px; align-items:center; }
.hero-primo { max-width:none; margin:0; padding:0; }
.hero-primo h1 { font-size:clamp(40px,4.6vw,64px); line-height:1.04; font-weight:750; margin:0 0 24px; max-width:12ch; }
.hero-primo .hero-sotto { max-width:50ch; font-size:17px; line-height:1.7; margin:0 0 24px; color:var(--txt-2); }
.hero-azioni { gap:12px; margin:0; padding:0; border:0; }
.hero-azioni .btn { min-height:52px; padding:13px 24px; font-size:15px; }
.hero-nota { margin-top:16px; font-size:13px; color:var(--txt-2); }
.demo-board { min-width:0; padding:28px; background:var(--bg-2); border-radius:14px; }
.demo-board h2 { font-size:27px; margin:0 0 6px; }
.demo-board>p { margin:0 0 18px; font-size:13px; color:var(--txt-2); }
.demo-library { list-style:none; padding:0; margin:0; }
.demo-library li+li { border-top:1px solid var(--line); }
.demo-library a { display:grid; grid-template-columns:58px minmax(0,1fr); gap:16px; align-items:center; color:var(--txt); text-decoration:none; padding:18px 0; }
.demo-library .demo-thumb { position:relative; width:58px; height:82px; overflow:hidden; border-radius:6px; background:var(--bg-3); }
.demo-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.demo-thumb .poster-fallback { font-size:10px; padding:4px; }
.demo-library strong { display:block; font:650 19px/1.25 "Bricolage Grotesque",sans-serif; letter-spacing:-.02em; margin:4px 0 7px; }
.demo-library small { font-size:12px; color:var(--txt-2); }
.demo-library span.demo-count { color:var(--accent); font-size:13px; font-weight:700; }
.demo-library a:hover strong { color:var(--accent-alto); text-decoration:underline; text-underline-offset:4px; }
#benvenuto>.sezione { grid-column:1/-1; margin:0; border-top:1px solid var(--line); padding-top:40px; }
.sezione { margin-bottom:48px; }
.sezione-t,.guida-h2 { font-size:28px; line-height:1.2; margin:0 0 12px; text-transform:none; }
.sezione-d { color:var(--txt-2); max-width:72ch; font-size:15px; line-height:1.7; margin-bottom:20px; }
.tracker-intro { display:grid; grid-template-columns:1fr 1.5fr; gap:24px 64px; }
.tracker-intro .sezione-t { grid-row:span 2; }
.tracker-intro p { margin:0; }
.quattro { grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.quattro-voce { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.quattro-voce b { font-size:17px; color:var(--txt); margin-bottom:8px; }
.quattro-voce span { display:block; font-size:14px; line-height:1.7; }
.sezione-chiusa { margin-top:28px; }
.sezione-partenza { background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; }
.passi { max-width:76ch; }
.passi .passo { gap:20px; padding:16px 0; }
.passi .passo-n,.login-n { background:var(--bg-3); border:1px solid var(--line); color:var(--accent); }
.passi .passo-corpo h3 { font-size:20px; }
.passi .passo-corpo p { max-width:70ch; font-size:15px; }
.benvenuto-apertura>summary { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:56px; cursor:pointer; }
.benvenuto-apertura>summary h2 { margin:0; }
.benvenuto-apertura-azione { color:var(--accent); font-size:14px; }
.benvenuto-apertura-corpo { padding-top:20px; }
.hero h1,.hero-t { font-size:clamp(36px,4.5vw,56px); line-height:1.1; }
#benvenuto .hero-primo h1 { font-size:clamp(40px,4.6vw,64px); }
.hero { margin-bottom:40px; }
#benvenuto .hero { margin:0; }
#quadro .hero { max-width:76ch; }
.spazi-carte { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.spazio-carta { display:flex; flex-direction:column; min-height:220px; border:1px solid var(--line); border-radius:14px; padding:26px 26px 22px; background:var(--bg-2); box-shadow:none; color:var(--txt); text-decoration:none; transition:border-color .15s, background .15s; }
.spazio-carta:hover { border-color:var(--accent); background:var(--bg-3); transform:none; }
.spazio-carta.in-cima { border-color:var(--accent); }
.spazio-carta h3 { margin:0 0 14px; font-size:22px; }
.spazio-n { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; font-size:15px; }
.spazio-n b { font:750 52px/1 "Bricolage Grotesque","Manrope",sans-serif; letter-spacing:-.03em; color:var(--accent-alto); }
.spazio-n span { font-size:14px; font-weight:600; color:var(--txt-2); }
.spazio-n.vuoto { font-size:15px; color:var(--txt-2); }
.spazio-carta p { margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--txt-2); }
.spazio-vai { margin-top:auto; padding-top:18px; color:var(--accent); font-size:14px; font-weight:700; }
.spazio-carta:hover .spazio-vai { color:var(--accent-alto); }
.quadro-testa { margin-bottom:32px; }
.quadro-testa h1 { margin:0 0 10px; }
.quadro-testa .hero-sotto { margin:0; }
.uscite { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.uscite li { border-bottom:1px solid var(--line); }
.uscita { display:grid; grid-template-columns:170px 44px minmax(0,1fr); gap:18px; align-items:center; padding:12px 8px; color:var(--txt); text-decoration:none; border-radius:8px; }
.uscita:hover { background:var(--bg-2); }
.uscita:hover strong { color:var(--accent-alto); }
.uscita-quando { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--txt-2); }
.uscita-quando b { color:var(--txt); font-size:15px; }
.uscita-thumb { position:relative; width:44px; height:62px; overflow:hidden; border-radius:6px; background:var(--bg-3); }
.uscita-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.uscita-thumb .poster-fallback { font-size:9px; padding:3px; }
.uscita-cosa { display:flex; flex-direction:column; gap:3px; min-width:0; }
.uscita-cosa strong { font:650 16px/1.3 "Bricolage Grotesque","Manrope",sans-serif; letter-spacing:-.01em; overflow-wrap:anywhere; }
.uscita-cosa small { font-size:13px; color:var(--txt-2); }
.uscite-altre { padding:12px 8px; font-size:13px; color:var(--txt-2); }
.servizio { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); box-shadow:none; }
.servizio.on { border:1px solid var(--line); }
.servizio b { font-size:16px; }
.servizio b::after { content:""; display:inline-block; width:8px; height:8px; margin-left:10px; border-radius:50%; background:var(--line-forte); vertical-align:middle; }
.servizio.on b::after { background:var(--ok); }
.servizio-nota { max-width:70ch; margin-top:4px; font-size:13.5px; }
.layout { max-width:1760px; grid-template-columns:240px minmax(0,1fr); gap:48px; padding:32px 40px 88px; }
.sidebar { position:sticky; top:210px; min-width:0; }
.nav-disclosure { display:none; }
.nav { position:static; top:auto; display:flex; flex-direction:column; gap:4px; margin:0; padding:0; max-height:calc(100dvh - 240px); overflow:auto; border:0; }
.nav-item { min-height:44px; width:100%; border:0; border-radius:8px; padding:10px 12px; font:600 14px/1.5 "Manrope",sans-serif; color:var(--txt-2); white-space:normal; text-transform:none; }
/* Il menu scorre, e un contorno esterno veniva tagliato ai lati: dentro si vede tutto. */
.nav-item:focus-visible { outline-offset:-3px; }
.nav-item.on { background:var(--accent); color:var(--accent-scuro); }
.nav-item.on .nav-n { color:var(--accent-scuro); background:transparent; }
.nav-n { font-size:12px; padding:2px 7px; border-radius:5px; }
.nav-fasce { display:flex; flex-direction:column; gap:2px; margin:2px 0 8px; }
.nav-fasce:empty { display:none; }
.nav-fascia { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; margin-left:14px; padding:8px 10px 8px 12px; border:0; border-left:2px solid var(--line); border-radius:0 8px 8px 0; background:transparent; color:var(--txt-2); font:600 13px/1.35 "Manrope",sans-serif; text-align:left; white-space:normal; cursor:pointer; }
.nav-fascia:hover { color:var(--txt); background:var(--bg-2); border-left-color:var(--accent); }
.nav-fascia:focus-visible { outline-offset:-3px; }
.block { margin-bottom:42px; }
.block-title { font-size:25px; letter-spacing:-.02em; line-height:1.2; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); text-transform:none; }
.block-title .toggle { min-height:44px; font:inherit; gap:12px; }
.block-title.has-toggle { padding-bottom:0; }
.count,.band-n { background:var(--bg-3); color:var(--txt-2); border-radius:5px; font:600 13px "Manrope",sans-serif; }
.band-title { display:flex; align-items:center; gap:10px; margin:28px 0 16px; font:700 17px/1.3 "Bricolage Grotesque","Manrope",sans-serif; letter-spacing:-.01em; text-transform:none; color:var(--txt); }
.band-title:first-child { margin-top:8px; }
.grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:28px 20px; }
.grid-sm { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 18px; }
.poster { border:0; border-radius:10px; background:var(--bg-2); box-shadow:none; }
.poster-fallback { background:var(--bg-3); color:var(--txt-2); box-shadow:none; font-family:"Bricolage Grotesque",sans-serif; }
.card:hover .poster { transform:none; box-shadow:none; outline:2px solid var(--accent); outline-offset:3px; }
.title { display:block; height:auto; min-height:0; overflow:visible; white-space:normal; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.01em; margin-top:10px; text-transform:none; }
/* Due righe al massimo. Il taglio va sul pulsante che porta il nome: dentro al
   contenitore il pulsante e' un blocco solo, e li' il taglio non fa niente (un
   titolo lungo andava su cinque righe). Il nome intero resta nel pulsante per
   chi legge con la voce, e nel suggerimento della card. */
.card .title .titolo-scheda { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; max-width:100%; }
.sub { color:var(--txt-2); font-size:13px; }
.badge { border-radius:5px; box-shadow:none; font:700 12px/1.3 "Manrope",sans-serif; }
.badge-count { color:#35221c; background:var(--hot); }
.badge-new { color:var(--accent-scuro); background:var(--accent); }
.badge-back,.badge-done { color:#12362c; background:var(--ok); }
.badge-info,.badge-soon { background:#171c24; }
.card-act { min-width:44px; min-height:44px; opacity:1; border:1px solid var(--line-forte); border-radius:6px; background:#171c24; color:var(--txt); padding:8px; font:700 12px "Manrope",sans-serif; }
.avviso-esempio { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; font-size:14px; gap:20px; margin-bottom:28px; }
.avviso-carico,.filtro-attivo { background:var(--bg-3); border:1px solid var(--line); border-radius:8px; }
.filtro-attivo { color:var(--txt); }
.sensei-rimando { border:1px solid var(--line); background:var(--bg-2); color:var(--txt); border-radius:10px; box-shadow:none; }
.sensei-eti { color:var(--txt-2); }
.sensei-claim { color:var(--txt); font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(18px,1.5vw,21px); line-height:1.25; text-transform:none; }
.sensei-vai { color:var(--accent); text-transform:none; }
.modal { background:rgba(10,13,18,.82); padding:20px; }
.modal-box { max-height:calc(100dvh - 40px); overflow:auto; background:var(--bg-2); border:1px solid var(--line-forte); border-radius:14px; padding:28px; box-shadow:0 18px 64px rgba(0,0,0,.3); }
.modal-box h2 { font-size:28px; }
.modal-box .muted,.modal-intro,.servizio-nota { color:var(--txt-2); }
.pin-code { background:var(--bg); color:var(--accent-alto); border:1px solid var(--line); border-radius:8px; }
.field,.check,.sos-voce { padding:18px 0; border-bottom:1px solid var(--line); }
.field input[type=range] { min-height:44px; accent-color:var(--accent); }
.check { min-height:44px; }
.check input { width:20px; height:20px; accent-color:var(--accent); }
.pieghevole { border:1px solid var(--line); border-radius:10px; background:transparent; box-shadow:none; }
.pieghevole>summary { min-height:52px; font-family:"Bricolage Grotesque",sans-serif; font-size:19px; }
.tabella { border-radius:8px; border-color:var(--line); }
.cella-t { background:var(--bg-3); }
.toast { border:1px solid var(--line-forte); border-radius:10px; color:var(--txt); background:var(--bg-3); box-shadow:0 12px 32px rgba(0,0,0,.25); }
.toast-azione { min-height:44px; padding:8px 12px; color:var(--accent); }
.piede { max-width:1680px; padding:32px 0; margin:0 auto; border-top:1px solid var(--line); background:transparent; }
.piede-link { gap:24px; flex-wrap:wrap; }
.piede-link a,.piede-casa { display:inline-flex; align-items:center; min-height:44px; }
.piede-nota { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--txt-2); }
.piede-casa img { width:220px; height:auto; }
@media (max-width:1100px) {
 .topbar { position:static; }
 .topbar-row .spacer { display:none; }
 .marchio { margin-right:auto; }
 .sync-info { display:none; }
 .layout { grid-template-columns:1fr; gap:24px; }
 .sidebar { position:static; }
 .nav-disclosure { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 14px; color:var(--txt); background:var(--bg-2); border:1px solid var(--line-forte); border-radius:8px; font:600 14px "Manrope",sans-serif; text-align:left; }
 .nav-disclosure svg { width:18px; height:18px; flex:none; transition:transform .18s ease-out; }
 .nav-disclosure[aria-expanded=true] svg { transform:rotate(180deg); }
 .nav { display:none; margin-top:8px; flex-direction:column; width:100%; max-height:none; overflow:visible; padding:8px; background:var(--bg-2); border-radius:10px; }
 .sidebar[data-open] .nav { display:flex; }
 .nav-item { width:100%; flex:none; }
 #benvenuto:not(.hidden) { gap:48px 36px; }
 .topbar-row+.topbar-row { flex-wrap:wrap; }
 .brand-box { flex:1 1 260px; }
 .search { order:0; flex:1 1 240px; }
 .campo { flex:0 1 auto; }
 .piede { margin-inline:32px; }
 .spazi-carte { grid-template-columns:1fr; }
 .spazio-carta { min-height:0; }
}
@media (max-width:760px) {
 body { padding-bottom:76px; }
 .topbar-inner { padding:0 20px; }
 .topbar-row { min-height:72px; gap:10px; }
 .marchio { font-size:20px; gap:8px; }
 .marchio img { width:30px; height:30px; }
 .spazi { position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
 .spazi a { min-height:44px; padding:8px; font-size:14px; }
 .topbar-row+.topbar-row { min-height:0; padding:18px 0; row-gap:12px; }
 .brand-box { flex:1 1 100%; }
 .brand { display:block; position:static; clip-path:none; width:auto; height:auto; font-size:30px; }
 .search { flex:1 1 50%; width:0; min-width:0; }
 .campo { flex:1 1 40%; min-width:0; }
 .campo-eti { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .campo .select { width:100%; }
 .pagina-centro,.pagina-centro.stretta,.pagina-centro.guida { padding:40px 20px 56px; }
 #benvenuto:not(.hidden) { grid-template-columns:1fr; gap:36px; }
 #benvenuto .hero-primo h1 { font-size:44px; max-width:12ch; }
 .hero-primo .hero-sotto { font-size:16px; }
 .hero-azioni .btn { flex:1 1 100%; width:100%; }
 .demo-board { padding:22px; }
 .tracker-intro { display:block; }
 .tracker-intro p { margin-top:14px; }
 .quattro { grid-template-columns:1fr 1fr; gap:28px 20px; }
 #benvenuto>.sezione { padding-top:30px; }
 .sezione-t { font-size:26px; }
 .layout { padding:20px 20px 56px; gap:20px; }
 .grid,.grid-sm { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
 .title { font-size:14px; }
 .avviso-esempio { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px; }
 .avviso-esempio>span { flex:initial; }
 .avviso-esempio .btn { align-self:flex-start; }
 .block-title { font-size:23px; }
 .block-title .toggle { gap:10px; }
 .modal { padding:12px; }
 .modal-box { padding:22px; max-height:calc(100dvh - 24px); }
 .piede { margin-inline:20px; padding:24px 0; }
 .spazio-n b { font-size:42px; }
 .uscita { grid-template-columns:44px minmax(0,1fr); gap:14px; }
 .uscita-quando { grid-column:2; grid-row:2; flex-direction:row; gap:8px; }
 .uscita-thumb { grid-row:1 / span 2; }
 .servizio { flex-direction:column; align-items:flex-start; }
 .toast { bottom:90px; max-width:calc(100vw - 32px); }
 [id] { scroll-margin-top:24px; }
}
@media (max-width:390px) {
 .topbar-inner { padding-inline:12px; }
 .topbar-row { gap:8px; }
 .marchio { font-size:18px; gap:6px; }
 .marchio img { width:26px; height:26px; }
 .lingua-switch button { min-width:44px; }
 #benvenuto .hero-primo h1 { font-size:40px; }
 .pagina-centro,.pagina-centro.stretta,.pagina-centro.guida,.layout { padding-inline:16px; }
 .demo-board { padding:20px; }
 .quattro { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* La scritta MAGISTAF resta com'e': il marchio non si ricolora (STANDARD §2). */
/* Le azioni appartengono alle schede; la barra compare solo in selezione. */
.strumenti-libreria { display:flex; align-items:center; gap:12px; }
.strumenti-libreria label { font-size:0; }
.strumenti-libreria .select { width:165px; }
.strumenti-libreria .btn { white-space:nowrap; }
body[data-spazio] .topbar-row+.topbar-row { flex-wrap:wrap; gap:12px; }
body[data-spazio] .search { flex:1 1 180px; width:180px; }
body[data-spazio] .brand-box { flex:1 1 210px; }
body[data-spazio] .topbar-row+.topbar-row>.spacer { display:none; }
.selezione-carta { display:none; position:absolute; inset:0; z-index:6; cursor:pointer; }
.selezione-carta input { position:absolute; bottom:10px; right:10px; width:26px; height:26px; accent-color:var(--accent); cursor:pointer; }
/* In basso a destra, l'unico angolo che nessun bollino usa: in alto a sinistra
   copriva la data d'uscita, in basso a sinistra c'e' il formato degli anime. */
.selezione-attiva .selezione-carta { display:block; }
.card.selezionata .poster { outline:3px solid var(--accent); outline-offset:3px; }
.selezione-carta:focus-within { outline:3px solid var(--accent-alto); outline-offset:-3px; }
.azioni-selezione { position:fixed; z-index:35; bottom:20px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--bg-2); border:1px solid var(--line-forte); border-radius:12px; box-shadow:0 8px 32px #0008; }
#contoSelezione { font-size:13px; }
#modificaSelezione { background:var(--accent); color:var(--accent-scuro); }
/* Lo spazio per la barra si lascia in fondo alla pagina, non in fondo alla
   griglia: prima il piede finiva sotto la barra. E i messaggi a comparsa
   salgono sopra la barra invece di coprirne i pulsanti. */
body.selezione-attiva { padding-bottom:130px; }
body.selezione-attiva .toast { bottom:110px; }
/* Sul desktop la testata resta ferma in alto: un elemento raggiunto con Tab
   non deve finirci sotto. */
@media (min-width:1101px) { html { scroll-padding-top:200px; } }
.dialogo-stato { color:var(--txt); background:var(--bg); border:1px solid var(--line-forte); border-radius:14px; width:520px; max-width:calc(100% - 32px); max-height:calc(100dvh - 32px); padding:28px; margin:auto; overflow:auto; overscroll-behavior:contain; }
.dialogo-stato::backdrop { background:rgba(8,10,14,.82); }
.dialogo-stato h2 { font-size:26px; margin:0 0 12px; }
.dialogo-stato p { margin:12px 0; color:var(--txt-2); }
.dialogo-stato .nota-stato { font-size:13px; }
.dialogo-stato .riepilogo-stato { color:var(--txt); font-weight:700; }
.dialogo-stato .riepilogo-stato:empty,.dialogo-stato .esito-stato:empty { display:none; }
.esito-stato,.scheda-esito { padding:10px 14px; border-left:3px solid var(--accent); background:var(--bg-2); color:var(--txt)!important; }
.dialogo-azioni { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn-primario { background:var(--accent); border-color:var(--accent); color:var(--accent-scuro); }
.btn-primario:hover:not(:disabled) { background:var(--accent-alto); color:var(--accent-scuro); }
.solo-lettori { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Copertina e nome sono pulsanti: aprono la scheda interna, non Simkl. */
.poster-link { padding:0; margin:0; border:0; background:transparent; cursor:pointer; }
.titolo-scheda { display:inline; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; cursor:pointer; }
.titolo-scheda:hover { color:var(--accent-alto); text-decoration:underline; text-underline-offset:4px; }

/* Gli stati Simkl come pulsanti radio: pochi, tutti visibili, 44px. */
.scelta-stati { display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin:0; padding:0; border:0; }
.scelta-stato { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid var(--line-forte); border-radius:8px; color:var(--txt); font-size:14px; font-weight:700; cursor:pointer; }
.scelta-stato input { width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:inherit; }
.scelta-stato small { color:var(--txt-2); font-size:12px; font-weight:600; }
.scelta-stato:has(input:checked) { border-color:var(--accent); background:var(--bg-3); }
.scelta-stato:has(input:focus-visible) { outline:3px solid var(--accent-alto); outline-offset:3px; }
.scelta-stato:has(input:disabled) { opacity:.6; cursor:not-allowed; }

/* La scheda interna di un titolo. */
.scheda-titolo { width:min(920px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; color:var(--txt); background:var(--bg); border:1px solid var(--line-forte); border-radius:14px; overflow:auto; overscroll-behavior:contain; }
.scheda-titolo::backdrop { background:rgba(8,10,14,.82); }
.scheda-barra { position:sticky; top:0; z-index:3; display:flex; justify-content:flex-end; padding:12px 12px 0; pointer-events:none; }
.scheda-chiudi { display:grid; place-items:center; background:var(--bg-2); cursor:pointer; pointer-events:auto; }
.scheda-chiudi:hover { border-color:var(--accent); }
.scheda-corpo { display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; padding:0 40px 40px; margin-top:-24px; }
.scheda-poster .poster { width:100%; }
.scheda-poster .poster-fallback { font-size:16px; }
.scheda-info { min-width:0; }
.scheda-occhiello { margin:0 56px 6px 0; color:var(--txt-2); font-size:13px; font-weight:700; }
.scheda-info h2 { margin:0 56px 6px 0; font-size:clamp(26px,3.2vw,36px); line-height:1.12; }
.scheda-info h2:focus { outline:none; }
.scheda-info h2:focus-visible { outline:3px solid var(--accent-alto); outline-offset:4px; }
.scheda-alt { margin:0 0 4px; color:var(--txt-2); font-size:14px; }
.scheda-dati { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px 24px; margin:20px 0 0; padding:18px 0; border-block:1px solid var(--line); }
.scheda-dati:empty { display:none; }
.scheda-dati>div { min-width:0; }
.scheda-dati dt { margin:0 0 2px; color:var(--txt-2); font-size:12px; font-weight:700; }
.scheda-dati dd { margin:0; font-size:15px; overflow-wrap:anywhere; }
.scheda-dati time { text-decoration:underline dotted var(--line-forte); text-underline-offset:3px; }
.scheda-dati-piccoli { margin-top:16px; padding-bottom:0; border-bottom:0; }
.scheda-sezione { margin-top:28px; }
.scheda-sezione h3 { margin:0 0 12px; font-size:20px; }
.scheda-sezione h3:focus { outline:none; }
.scheda-nota { margin:12px 0 0; color:var(--txt-2); font-size:13px; line-height:1.6; }
.scheda-applica { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.scheda-azioni { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.scheda-azioni .btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.scheda-freccia { color:var(--accent); }
.scheda-esito { margin:16px 0 0; font-size:14px; }
.scheda-esito:empty { display:none; }
.scheda-trama { max-width:68ch; margin:0; color:var(--txt); font-size:15px; line-height:1.7; }
@media(max-width:760px) {
 .strumenti-libreria { width:100%; }
 .strumenti-libreria label { flex:1; }
 .strumenti-libreria .select { width:100%; }
 .azioni-selezione { bottom:84px; gap:8px; padding:12px; flex-wrap:wrap; width:calc(100% - 24px); max-width:none; }
 #contoSelezione { flex:1 1 100%; }
 .azioni-selezione .btn { padding:8px 10px; flex:1; font-size:12px; }
 body.selezione-attiva { padding-bottom:250px; }
 body.selezione-attiva .toast { bottom:230px; }
 .scheda-titolo,.dialogo-stato { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
 .dialogo-stato { padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
 .scheda-corpo { grid-template-columns:1fr; gap:20px; padding:0 20px calc(32px + env(safe-area-inset-bottom)); }
 .scheda-poster { width:min(42vw,170px); }
 .scheda-dati { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
 .scheda-azioni .btn,.scheda-applica .btn { flex:1 1 auto; justify-content:center; }
}

/* La pagina del progetto: il perche', come legge la libreria, cosa fa su
   Simkl, i dati e i crediti. Le sei sezioni stanno in una griglia leggibile a
   colpo d'occhio, come le sezioni vere degli spazi. */
.progetto-testa { margin-bottom:48px; }
.progetto-occhiello { margin:0 0 12px; color:var(--accent); font-size:14px; font-weight:700; }
.progetto-testa h1 { margin:0 0 18px; max-width:18ch; }
.progetto-testa .hero-sotto { max-width:60ch; font-size:17px; line-height:1.7; color:var(--txt-2); }
.progetto .sezione { padding-top:28px; border-top:1px solid var(--line); }
.progetto-sezioni { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; }
.progetto-sezioni>div { padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.progetto-sezioni dt { margin:0 0 6px; font:700 16px/1.3 "Bricolage Grotesque","Manrope",sans-serif; color:var(--txt); }
.progetto-sezioni dd { margin:0; font-size:14px; line-height:1.6; color:var(--txt-2); }
.progetto .elenco li { font-size:15px; line-height:1.7; }
@media (max-width:760px) {
 .progetto-sezioni { grid-template-columns:1fr; }
}

/* Gli schermi larghi. Su un monitor da 2560 pixel la pagina restava una
   colonna da 1480 in mezzo al vuoto, con testi da 14-15 pixel: tutto sembrava
   piccolo e schiacciato (29 settembre 2026). Qui si allargano la pagina e la
   griglia e si alzano di un gradino testi e comandi. Non con `zoom`, che
   ingrandisce anche le altezze calcolate sullo schermo: la scheda di un titolo
   finiva piu' alta della finestra. */
@media (min-width:1800px) {
 body { font-size:17px; }
 .topbar-inner { max-width:2000px; padding:0 48px; }
 .layout { max-width:2000px; grid-template-columns:270px minmax(0,1fr); gap:56px; padding:40px 48px 96px; }
 .piede { max-width:1904px; }
 .marchio { font-size:24px; }
 .spazi a { font-size:16px; padding:10px 20px; }
 .brand { font-size:36px; }
 .brand-sub { font-size:15px; }
 .search,.select { min-height:50px; font-size:17px; }
 .search { width:340px; flex-basis:340px; }
 .btn { font-size:15px; min-height:48px; }
 .nav-item { min-height:48px; font-size:15px; }
 .nav-n { font-size:13px; }
 .nav-fascia { font-size:14px; min-height:44px; }
 .block { margin-bottom:52px; }
 .block-title { font-size:28px; }
 .band-title { font-size:19px; }
 .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:34px 24px; }
 .grid-sm { grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:28px 20px; }
 .title { font-size:16px; }
 .badge { font-size:13px; }
 .pagina-centro { max-width:1480px; }
 .pagina-centro.stretta,.pagina-centro.guida { max-width:1000px; }
 .sezione-t,.guida-h2 { font-size:32px; }
 .sezione-d { font-size:17px; }
 .elenco li,.progetto .elenco li { font-size:17px; }
 .progetto-sezioni dt { font-size:18px; }
 .progetto-sezioni dd { font-size:15.5px; }
 .spazio-carta { min-height:250px; padding:30px; }
 .spazio-carta h3 { font-size:26px; }
 .spazio-n b { font-size:60px; }
 .uscita-cosa strong { font-size:18px; }
 .scheda-titolo { width:min(1080px,calc(100% - 48px)); }
 .scheda-corpo { grid-template-columns:280px minmax(0,1fr); }
 .scheda-dati dd { font-size:16px; }
 .scheda-trama { font-size:16.5px; }
 .piede-nota,.piede-link a { font-size:15px; }
}

/* ---- 7 ottobre 2026: episodi sotto le copertine, comando rapido, riquadro nella scheda ---- */
.riga-carta { margin-top:3px; font-size:13px; line-height:1.35; color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visto-rapido { position:absolute; right:8px; bottom:8px; z-index:3; padding:7px 10px; border:0; border-radius:6px;
  font:700 13px/1 "Manrope",sans-serif; color:#12362c; background:var(--ok); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.visto-rapido:hover { filter:brightness(1.12); }
.visto-rapido:focus-visible { outline:3px solid var(--accent-alto); outline-offset:2px; }
.selezione-attiva .visto-rapido { display:none; }
.scheda-numeri { display:flex; flex-wrap:wrap; gap:10px 26px; margin:10px 0 12px; }
.scheda-numeri > div { display:flex; flex-direction:column-reverse; }
.scheda-numeri dd { margin:0; font:800 28px/1.1 "Bricolage Grotesque","Manrope",sans-serif; color:var(--txt); }
.scheda-numeri dt { font-size:13px; color:var(--txt-2); }
.scheda-numeri .da-vedere dd { color:var(--hot); }
.scheda-avanzamento { display:block; width:100%; height:8px; border-radius:99px; overflow:hidden; background:#2a3342; }
.scheda-avanzamento > span { display:block; height:100%; border-radius:99px; background:var(--ok); }
.scheda-prossimo { margin:0; flex:1 1 220px; }
@media (min-width:1800px) { .riga-carta { font-size:14px; } }
.scarta-rapido { position:absolute; right:8px; bottom:8px; z-index:3; width:30px; height:30px; padding:0; border:0; border-radius:6px;
  font:700 14px/1 "Manrope",sans-serif; color:var(--txt); background:rgba(10,14,20,.86); cursor:pointer; opacity:0; transition:opacity .12s; }
.card:hover .scarta-rapido, .scarta-rapido:focus-visible { opacity:1; }
.scarta-rapido:hover { background:var(--hot); color:#35221c; }
.scarta-rapido:focus-visible { outline:3px solid var(--accent-alto); outline-offset:2px; }
.selezione-attiva .scarta-rapido { display:none; }
@media (hover:none) { .scarta-rapido { opacity:1; } }

/* ---- 7 ottobre 2026: rifinitura grafica, da catture a 2560x1440 e a 390x844 ---- */
/* Il nome nella scheda prende il fuoco per i lettori di schermo: non e' un comando, niente riquadro. */
#schedaNome:focus { outline:none; }
/* Le descrizioni delle sezioni erano un rigo solo lungo tutto lo schermo, a 13 px. */
.hint { max-width:96ch; font-size:14px; line-height:1.5; }
/* Le scelte in fila vanno a capo: su telefono "Quando apri il sito" usciva dallo schermo. */
.chips { flex-wrap:wrap; }
/* Le scelte di un suggerimento: una griglia, non pulsanti di larghezze diverse messi di seguito. */
.scheda-scelte { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:stretch; }
.scheda-scelte .btn { width:100%; justify-content:center; text-align:center; }
.scheda-scelte .btn-primario { grid-column:1 / -1; }
/* La casella di selezione, vuota, era un quadrato scuro su copertine scure. */
.selezione-carta input { color-scheme:light; border-radius:4px; box-shadow:0 0 0 2px rgba(10,14,20,.75); }
@media (min-width:1800px) {
 .hint { font-size:15.5px; }
 .badge { font-size:14px; }
 .visto-rapido { font-size:14.5px; padding:8px 12px; }
 .campo-eti { font-size:14px; }
 .nav-n,.count,.band-n { font-size:14px; }
 .riga-carta { font-size:15px; }
 .scheda-dati dt,.scheda-numeri dt { font-size:13.5px; }
 .scheda-numeri dd { font-size:34px; }
 .scheda-occhiello { font-size:14.5px; }
 .scheda-nota { font-size:14.5px; }
 .uscita-quando { font-size:14.5px; }
 .uscita-quando b { font-size:17px; }
 .uscita-cosa small { font-size:14.5px; }
}
@media (max-width:760px) {
 /* quattro pulsanti su una riga diventavano colonne di parole spezzate */
 .azioni-selezione { display:grid; grid-template-columns:1fr 1fr; }
 #contoSelezione { grid-column:1 / -1; }
 .azioni-selezione .btn { font-size:13px; min-height:44px; padding:8px 10px; }
 .scheda-scelte { grid-template-columns:1fr 1fr; }
}