/* CSS per index.php */
:root{
  --paper:#FFFFFF; --ink:#141210; --graphite:#6E6862;
  --red:#C8341E; --red-soft:#F4E2DC;
  --grid-fine:#F6E7E1; --edge:#D8D2CB; --tint:#FAF8F6;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans',system-ui,sans-serif; font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(to right, var(--grid-fine) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(to bottom, var(--grid-fine) 0 1px, transparent 1px 19px);
}
h1,h2,h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;margin:0;letter-spacing:-.015em;line-height:1.06;}
.mono{font-family:'Azeret Mono',monospace;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
svg,canvas{display:block;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

.ol{stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linejoin:round;}
.cl{stroke:var(--red);stroke-width:.6;fill:none;stroke-dasharray:7 2 1.5 2;}
.dim{stroke:var(--graphite);stroke-width:.55;fill:none;}
text.d{font-family:'Azeret Mono',monospace;font-size:7.5px;font-weight:500;fill:var(--graphite);}

/* Salti interni: la testata resta appiccicata in alto e alta una
   settantina di pixel. Senza questo, ogni #ancora atterra sotto la
   testata e la prima riga del contenuto resta nascosta. */
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
#sheets,#community,#top10,#how,#about,#languages{scroll-margin-top:88px;}

/* --- IL SELETTORE DELLA LINGUA ---
   E' un <details>: si apre e si chiude senza una riga di JavaScript,
   e dentro ci sono link veri. Se il JavaScript e' spento funziona
   comunque, e i motori di ricerca seguono i link e trovano le altre
   cinque versioni della pagina. */
.langpick{position:relative;}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--graphite);padding:6px 10px;border:1px solid var(--edge);background:#fff;}
.langpick summary::-webkit-details-marker{display:none;}
.langpick summary::after{content:'';width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);}
.langpick summary:hover{border-color:var(--ink);color:var(--ink);}
.langpick[open] summary{border-color:var(--ink);color:var(--ink);}
.lgcode{font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--red);}
@media(max-width:560px){.lgname{display:none;}}
.langlist{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--ink);min-width:172px;padding:5px;z-index:60;box-shadow:0 14px 30px -20px rgba(20,18,16,.65);}
.langlist a{display:block;font-size:14px;text-decoration:none;padding:8px 11px;color:var(--ink);}
.langlist a:hover{background:var(--tint);}
.langlist a[aria-current]{background:var(--ink);color:#fff;}

/* --- il riquadro delle lingue in fondo alla pagina ---
   Ogni voce e' scritta NELLA lingua a cui porta: e' il testo del
   link, non il tag, a dire a Google di che lingua parla la pagina
   che sta dall'altra parte. */
/* --- LA STRISCIA DI AGGIORNAMENTO ---
   E' costruita come il riquadro delle revisioni di una tavola vera:
   etichetta a sinistra, testo al centro, data a destra in carattere
   monospaziato. Sta sopra la griglia perche' e' li' che si guarda
   quando si torna a vedere se c'e' qualcosa di nuovo. */
.revbar{display:flex;align-items:stretch;border:1px solid var(--ink);background:#fff;margin:0 0 26px;}
.revbar i{font-family:'Azeret Mono',monospace;font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);writing-mode:vertical-rl;text-orientation:mixed;padding:10px 7px;border-right:1px solid var(--edge);background:var(--tint);display:flex;align-items:center;}
.revbar p{margin:0;padding:14px 18px;font-size:14.5px;color:var(--graphite);flex:1;max-width:70ch;}
.revbar p b{color:var(--ink);font-weight:600;}
.revbar time{font-family:'Azeret Mono',monospace;font-size:11px;color:var(--graphite);border-left:1px solid var(--edge);background:var(--tint);padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;white-space:nowrap;}
.revbar time s{text-decoration:none;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);}
.revbar time b{font-size:13px;color:var(--ink);font-weight:600;}
@media(max-width:760px){
  .revbar{flex-direction:column;}
  .revbar i{writing-mode:horizontal-tb;border-right:0;border-bottom:1px solid var(--edge);padding:7px 14px;}
  .revbar time{border-left:0;border-top:1px solid var(--edge);flex-direction:row;align-items:center;gap:9px;}
}
.langgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;}
@media(max-width:900px){.langgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.langgrid{grid-template-columns:1fr;}}
.langgrid a{display:block;text-decoration:none;border:1px solid var(--edge);background:#fff;padding:15px 16px 16px;}
.langgrid a:hover{border-color:var(--ink);}
.langgrid i{font-family:'Azeret Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:7px;}
.langgrid b{display:block;font-size:15px;font-weight:600;line-height:1.35;}

/* --- la riga che propone la lingua del browser ---
   La mette il JavaScript guardando le impostazioni del browser. E'
   fatto di proposito dal JavaScript e non dal server: il contenuto
   che Google riceve resta identico per tutti, e la pagina non cambia
   da sola sotto lo stesso indirizzo. */
.langbar{display:none;background:var(--red-soft);border-bottom:1px solid #E7C9C0;font-size:13.5px;}
.langbar.on{display:block;}
.langbar div{max-width:1180px;margin:0 auto;padding:9px 24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.langbar a{color:var(--red);font-weight:600;}
.langbar button{margin-left:auto;background:none;border:0;color:var(--graphite);font-size:18px;line-height:1;padding:2px 4px;}

/* masthead */
.masthead{border-bottom:1px solid var(--edge);background:rgba(255,255,255,.86);backdrop-filter:blur(6px);position:sticky;top:0;z-index:40;}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:1180px;margin:0 auto;}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;}
.wordmark img{height:44px;width:auto;display:block;flex:none;}
.wm-txt{display:flex;flex-direction:column;line-height:1.18;}
.wordmark b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:uppercase;}
.wm-sub{font-family:'Azeret Mono',monospace;font-size:9.5px;color:var(--graphite);letter-spacing:.11em;text-transform:uppercase;margin-top:3px;}
.wm-dom{font-family:'Azeret Mono',monospace;font-size:9px;color:#8A8279;letter-spacing:.08em;text-transform:uppercase;margin-top:1px;}
@media(max-width:680px){.wordmark img{height:36px;}.wordmark b{font-size:15px;}}
.mast-nav{display:flex;gap:4px;}
.mast-nav a{font-size:13.5px;text-decoration:none;color:var(--graphite);padding:7px 11px;}
.mast-nav a:hover{color:var(--ink);background:var(--tint);}
@media(max-width:680px){.mast-nav a:not(.keep){display:none;}}

/* hero */
.hero{padding:44px 0 30px;}
.sheet{background:var(--paper);border:1.5px solid var(--ink);position:relative;box-shadow:0 1px 0 var(--edge),0 14px 34px -22px rgba(20,18,16,.5);}
.sheet-inner{border:.5px solid var(--edge);margin:7px;padding:40px 40px 0;}
.hero-body{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;padding-bottom:34px;}
.stamp{font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:18px;}
.hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:800;font-variation-settings:'wdth' 108;}
.hero h1 em{font-style:normal;color:var(--red);}
.hero p{margin:18px 0 0;max-width:46ch;color:var(--graphite);font-size:15.5px;}
.jump{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap;}
.jump input{font-family:'Azeret Mono',monospace;font-size:14px;padding:11px 13px;width:150px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0;}
.jump input::placeholder{color:#8A8279;}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 18px;font-size:13.5px;font-weight:600;border-radius:0;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:background .14s,color .14s,border-color .14s;}
.btn:hover{background:var(--red);border-color:var(--red);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.hero-fig{border:.5px solid var(--edge);background:var(--paper);padding:10px;margin:0;}
.hero-fig svg,.hero-fig canvas{width:100%;height:auto;}

.tblock{display:grid;grid-template-columns:repeat(5,1fr);border-top:1.5px solid var(--ink);}
.tb{padding:9px 12px;border-right:.5px solid var(--edge);}
.tb:last-child{border-right:none;}
.tb i{display:block;font-family:'Azeret Mono',monospace;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);font-style:normal;margin-bottom:2px;}
.tb b{font-family:'Azeret Mono',monospace;font-size:12.5px;font-weight:600;}
@media(max-width:820px){
  .hero-body{grid-template-columns:1fr;gap:28px;align-items:start;}
  .sheet-inner{padding:26px 22px 0;margin:5px;}
  .tblock{grid-template-columns:repeat(2,1fr);}
  .tb{border-bottom:.5px solid var(--edge);}
}

/* controls */
.controls{padding:34px 0 8px;display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;}
.filter-set{display:flex;gap:18px;flex-wrap:wrap;}
.fgroup i{display:block;font-family:'Azeret Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);font-style:normal;margin-bottom:7px;}
.pills{display:flex;gap:5px;flex-wrap:wrap;}
.pill{border:1px solid var(--edge);background:var(--paper);color:var(--graphite);font-family:'Azeret Mono',monospace;font-size:12px;padding:6px 12px;border-radius:0;transition:.14s;}
.pill:hover{border-color:var(--ink);color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.tally{font-family:'Azeret Mono',monospace;font-size:12px;color:var(--graphite);white-space:nowrap;}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:22px 0 60px;}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}
.card{background:var(--paper);border:.6px solid var(--edge);padding:0;text-align:left;display:flex;flex-direction:column;transition:border-color .16s,transform .16s,box-shadow .16s;color:inherit;text-decoration:none;font:inherit;cursor:pointer;}
.card:hover{border-color:var(--ink);border-width:1.5px;transform:translateY(-3px);box-shadow:0 16px 30px -24px rgba(20,18,16,.65);}
.card:hover .card-fig{margin:-.9px;}
.card-fig{background:var(--paper);padding:14px;position:relative;min-height:150px;display:flex;align-items:center;justify-content:center;}
.card-fig canvas{width:100%;height:auto;}
.pending{font-family:'Azeret Mono',monospace;font-size:11px;color:#C7C0B9;letter-spacing:.1em;}
.card-tb{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--ink);margin-top:auto;}
.card-tb div{padding:7px 10px;border-right:.5px solid var(--edge);}
.card-tb div:last-child{border-right:none;}
.card-tb i{display:block;font-family:'Azeret Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);font-style:normal;}
.card-tb b{font-family:'Azeret Mono',monospace;font-size:12px;font-weight:600;}
.card-name{padding:11px 12px 0;font-size:14px;font-weight:600;}
.card-note{padding:2px 12px 12px;font-size:12.5px;color:var(--graphite);}
.lvl{display:inline-flex;gap:2px;vertical-align:middle;}
.lvl s{width:5px;height:5px;background:var(--red);display:block;text-decoration:none;}
.lvl s.off{background:var(--red-soft);}

/* empty state */
.empty{grid-column:1/-1;border:1px dashed var(--edge);background:var(--tint);padding:34px 30px;}
.empty h3{font-size:19px;font-weight:800;margin-bottom:8px;}
.empty p{color:var(--graphite);margin:0 0 14px;max-width:60ch;font-size:14.5px;}
.empty code{font-family:'Azeret Mono',monospace;font-size:13px;background:var(--paper);border:1px solid var(--edge);padding:2px 6px;}
.empty ol{margin:0;padding-left:20px;color:var(--graphite);font-size:14px;}
.empty li{margin-bottom:7px;}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(20,18,16,.55);z-index:60;display:none;padding:24px;overflow:auto;}
.overlay.on{display:flex;align-items:flex-start;justify-content:center;}
.detail{background:var(--paper);border:1.5px solid var(--ink);max-width:900px;width:100%;margin:auto;}
.detail-top{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--ink);}
.detail-top .num{font-family:'Azeret Mono',monospace;font-size:15px;font-weight:600;}
.xbtn{border:none;background:none;font-size:20px;line-height:1;color:var(--graphite);padding:4px 6px;}
.xbtn:hover{color:var(--red);}
.detail-fig{padding:22px 22px 6px;min-height:200px;}
.detail-fig canvas{width:100%;height:auto;}
.detail-body{padding:0 22px 22px;}
.detail-body h2{font-size:24px;font-weight:800;margin-bottom:6px;}
.detail-body p{color:var(--graphite);font-size:14.5px;margin:0 0 16px;}
.detail-acts{display:flex;gap:8px;flex-wrap:wrap;}

/* bands */
.band{border-top:1px solid var(--edge);padding:52px 0;}
.band h2{font-size:26px;font-weight:800;margin-bottom:10px;}
.lede{color:var(--graphite);max-width:62ch;margin:0 0 30px;}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);}
.note{background:var(--paper);padding:24px 22px;}
.note i{display:block;font-family:'Azeret Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--red);font-style:normal;margin-bottom:10px;}
.note h3{font-size:16.5px;font-weight:700;margin-bottom:7px;}
.note p{font-size:13.5px;color:var(--graphite);margin:0;}
@media(max-width:760px){.notes{grid-template-columns:1fr;}}
.tabs{display:flex;gap:0;border-bottom:1.5px solid var(--ink);margin-top:38px;flex-wrap:wrap;}
.tab{flex:1 1 240px;text-align:left;background:var(--paper);border:.6px solid var(--edge);border-bottom:0;
     padding:14px 18px;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110;font-weight:700;
     font-size:16px;color:var(--graphite);border-radius:0;margin-bottom:-1.5px;transition:.14s;}
.tab + .tab{border-left:0;}
.tab span{display:block;font-family:'Azeret Mono',monospace;font-size:10px;font-weight:500;
     letter-spacing:.06em;text-transform:uppercase;color:#8A8279;margin-top:4px;}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.tab[aria-selected="true"] span{color:rgba(255,255,255,.6);}
@media(max-width:560px){.tab{flex:1 1 100%;border-left:.6px solid var(--edge);}.tab + .tab{border-top:0;}}
.topwrap{border-top:1px solid var(--edge);padding:44px 0 10px;margin-top:20px;}
.topwrap h2{font-size:26px;font-weight:800;margin-bottom:10px;}
.comm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap;margin-bottom:6px;}
.comm-head h2{margin-bottom:10px;}
.sortbar{display:flex;align-items:center;gap:8px;padding:18px 0 0;}
.sortbar i{font-family:'Azeret Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);font-style:normal;}

/* scheda community: contenitore + area apribile + piè di pagina col cuore */
.ccard{background:var(--paper);border:.6px solid var(--edge);display:flex;flex-direction:column;transition:border-color .16s,transform .16s,box-shadow .16s;}
.ccard:hover{border-color:var(--ink);border-width:1.5px;transform:translateY(-3px);box-shadow:0 16px 30px -24px rgba(20,18,16,.65);}
.ccard:hover .card-fig{margin:-.9px;}
.copen{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-decoration:none;text-align:left;display:flex;flex-direction:column;width:100%;cursor:pointer;}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 11px;margin-top:auto;}
.by{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);}
.likebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);background:var(--paper);color:var(--graphite);font-family:'Azeret Mono',monospace;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:0;transition:.14s;}
.likebtn:hover{border-color:var(--red);color:var(--red);}
.likebtn[aria-pressed="true"]{background:var(--red-soft);border-color:var(--red);color:var(--red);}
.likebtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;}
.likebtn[aria-pressed="true"] svg{fill:currentColor;}
.likebtn.busy{opacity:.5;pointer-events:none;}

/* classifica */
.top{border:1px solid var(--edge);background:var(--paper);}
.toprow{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;width:100%;padding:12px 16px;border:0;border-bottom:.5px solid var(--edge);background:none;font:inherit;color:inherit;text-decoration:none;text-align:left;cursor:pointer;}
.toprow:last-child{border-bottom:0;}
.toprow:hover{background:var(--tint);}
.toprow .rk{font-family:'Azeret Mono',monospace;font-size:17px;font-weight:600;color:var(--red);}
.toprow .rk.q{color:var(--edge);}
.toprow .tt{font-size:14.5px;font-weight:600;}
.toprow .tb2{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-top:1px;}
.toprow .lk{display:flex;align-items:center;gap:6px;font-family:'Azeret Mono',monospace;font-size:13px;font-weight:600;color:var(--ink);}
.toprow .lk svg{width:13px;height:13px;fill:var(--red);stroke:var(--red);stroke-width:1.6;}
@media(max-width:560px){.toprow{grid-template-columns:34px 1fr auto;gap:10px;padding:11px 12px;}}
.origin{background:var(--tint);border:1px solid var(--edge);padding:26px;max-width:74ch;}
.origin p{margin:0 0 12px;font-size:14.5px;color:var(--graphite);}
.origin p:last-child{margin-bottom:0;}
.origin strong{color:var(--ink);}

footer{border-top:1.5px solid var(--ink);padding:34px 0 44px;margin-top:10px;}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:'Azeret Mono',monospace;font-size:11.5px;color:var(--graphite);}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}

/* Spaziatori dentro le card quando manca la nota. Servivano due
   altezze diverse (10px nelle card dell'archivio, 6px in quelle della
   community) per tenere il cartiglio allineato; ora sono classi
   dedicate, non style="height:10px" generati in index.js, perche'
   la Content-Security-Policy del sito vieta 'unsafe-inline' sugli
   stili. */
.card-spacer{display:block;}
.card-spacer-md{height:10px;}
.card-spacer-sm{height:6px;}

/* Lo SVG che definisce i marker (frecce di quota) e' alto e largo
   zero, ma fuori dal flusso: se lo lascio inline, occupa un pixel
   dove non deve. La posizione absolute va dichiarata qui, non inline
   nell'SVG, per lo stesso motivo dei card-spacer. */
.svg-defs{position:absolute;width:0;height:0;}

/* "Carica una tavola" in rosso nel menu'. Era un style="color:var(--red)"
   dentro index.php: e' diventato una classe per restare dentro la
   Content-Security-Policy. */
.nav-upload{color:var(--red);}

/* Stato vuoto della classifica "top 10" quando nessuna tavola della
   community ha ancora un mi piace. Era un div con style="padding:...
   color:... font-size:..." generato da index.js. */
.top-empty{padding:30px 22px;color:var(--graphite);font-size:14.5px;}

/* L'introduzione della sezione community e' un paragrafo .lede come
   gli altri, ma in quel punto specifico non vuole il margine sotto:
   l'header della sezione (.comm-head) ha un pulsante "Carica" alla
   destra e il paragrafo ci si deve allineare. Era un
   style="margin-bottom:0" inline; ora e' una classe, per restare
   dentro la Content-Security-Policy. */
.lede-tight{margin-bottom:0;}