/* Quaderno dei kanji — appunti, riordino parole, menu Esercitati */
/* ---- Appunti ---- */
.notes-ta{
  width:100%;min-height:340px;resize:vertical;
  font-family:var(--sans);font-size:15px;line-height:1.8;color:var(--ink);
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  tab-size:4;-moz-tab-size:4;
}
.notes-ta:focus{outline:none;border-color:var(--shu)}
/* Barra di formattazione: un unico blocco chiaro con i tasti dentro, invece di
   sei riquadri staccati. I tasti si accendono di bianco al passaggio, così la
   barra resta silenziosa finché non la usi. */
.notes-tools{
  display:flex;align-items:center;gap:2px;margin:0 0 8px;flex-wrap:wrap;
  padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  min-height:var(--ctl);box-sizing:border-box;
}
.nt-btn{
  border:none;background:transparent;color:var(--ink-soft);
  font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1;
  height:32px;padding:0 11px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s;
}
.nt-btn svg{flex:none;opacity:.75}
.nt-car{font-size:9px;opacity:.55;margin-left:2px}
/* la tendina degli elenchi (puntato e numerato in un solo pulsante) */
.list-pop{display:flex;flex-direction:column;gap:2px;min-width:180px;padding:8px}
.list-pop .lp-v{border:none;background:none;text-align:left;padding:8px 10px;border-radius:8px;
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:9px}
.list-pop .lp-v:hover{background:#F4F1EB}
.list-pop .lp-g{width:1.5em;text-align:center;color:var(--ink-soft);font-weight:700;flex:none}
.nt-btn:hover{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.nt-btn:hover svg{opacity:1}
.nt-btn:active{background:#F0EDE7}
.nt-sep{width:1px;height:18px;background:var(--line);margin:0 5px}
.notes-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;min-height:38px;
}
.notes-selq{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--shu)}
.notes-form{margin-top:8px}
.notes-formrow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;
}
.notes-formrow b{font-family:var(--serif);color:var(--ink)}
.notes-formrow input{
  flex:1;min-width:120px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;font-family:var(--sans);font-size:13.5px;
}
.notes-formrow input:focus{outline:none;border-color:var(--ai)}
.notes-done{color:#12A150;font-weight:700;font-size:13px;padding:8px 2px}
.g-homonote{
  margin-top:10px;font-size:12.5px;color:var(--shu);
  background:#FBF1EF;border:1px solid #EBD6D1;border-radius:9px;padding:7px 12px;
}

/* ---- Appunti multipli: titolo+data, elenco a destra, ricerca ---- */
.notes-wrap{display:flex;gap:16px;align-items:stretch;position:relative}
.notes-main{flex:1;min-width:0}
.notes-side{flex:none;width:216px;display:flex;flex-direction:column;gap:8px}
/* ---- Il foglio: titolo, data e testo in un unico riquadro ----
   Prima erano tre blocchi separati uno sotto l'altro, e sul telefono si
   mangiavano mezzo schermo prima ancora di cominciare a leggere. Adesso stanno
   dentro alla nota, come su un quaderno vero: titolo in alto a sinistra, data
   sotto a destra, poi il testo. */
.notes-sheet{
  display:flex;flex-direction:column;min-height:0;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .14s;
}
.notes-sheet:focus-within{border-color:var(--shu)}
.notes-head{display:flex;flex-direction:column;padding:9px 16px 5px;margin:0}
.note-title{
  width:100%;min-width:0;padding:0;border:none;background:transparent;
  font-family:var(--title);font-weight:900;font-size:21px;color:var(--ink);
  line-height:1.3;
}
.note-title::placeholder{color:var(--ink-soft);opacity:.5;font-weight:700}
.note-title:focus{outline:none}
/* Il segnalibro sta a sinistra, incolonnato col titolo; la data resta a
   destra. Prima erano appiccicati tutti e due in fondo a destra. */
.note-datecol{
  align-self:stretch;width:100%;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
/* la data è un'annotazione, non un campo: si scopre solo quando la sfiori */
.notes-head .date-jp{
  height:26px;padding:0 8px;border-radius:7px;border:none;background:transparent;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft);
  letter-spacing:0;white-space:nowrap;
}
.notes-head .date-jp:hover{background:var(--paper);color:var(--ink)}
/* dentro al foglio il testo non ha più un bordo suo: ce l'ha il foglio */
.notes-sheet .notes-tawrap{flex:1;min-height:0;border-top:1px solid var(--line);border-radius:0}
.notes-sheet .notes-ta{border:none;border-radius:0;background:transparent}
.notes-sheet .notes-hl{border:none;border-radius:0}
.notes-search{position:relative;min-width:0}
.notes-search input{
  width:100%;height:var(--ctl);padding:0 10px 0 30px;
  border:1.5px solid var(--line);border-radius:11px;
  font-family:var(--sans);font-size:13px;background:#fff;
}
.notes-search input:focus{outline:none;border-color:var(--shu)}
.notes-search::before{
  content:"";position:absolute;left:10px;top:50%;width:13px;height:13px;
  transform:translateY(-50%);opacity:.45;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320201C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
/* Filtri + elenco: i primi fermi, il secondo scorrevole sotto di loro. */
.notes-listbox{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;
}
/* Niente barra di scorrimento: fastidiosa e rubava larghezza alle righe, che
   così restano allineate ai filtri (da inizio data a fine segnalibro). Si
   scorre lo stesso; senza barra non c'è più niente da sovrapporre. */
.notes-list{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:none;
}
.notes-list::-webkit-scrollbar{display:none}
/* Ogni riga fa posto ai due tasti restringendosi, invece di scorrere via:
   così il titolo resta sempre leggibile mentre trascini. */
.note-row{display:flex;align-items:stretch;gap:0;border-radius:10px}
.note-item{
  flex:1;min-width:0;text-align:left;
  border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;
  background:#fff;padding:7px 10px;cursor:pointer;transition:border-color .12s, background .12s;
  touch-action:pan-y;                 /* il trascinamento laterale è nostro */
  display:flex;flex-direction:column;justify-content:center;min-height:46px;
}
/* La freccetta è tutt'uno con la riga: stesso riquadro di data e titolo,
   divisa da un filo verticale. Punta a sinistra perché è di là che si
   trascina la riga per scoprire archivio e cestino. */
.note-more{
  flex:none;width:28px;
  border:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:0 10px 10px 0;background:#fff;
  color:var(--ink-soft);cursor:pointer;
  display:grid;place-items:center;transition:.12s;
}
.note-more svg{width:15px;height:15px}
.note-more:hover{color:var(--shu)}
.note-row.open .note-more{display:none}
.note-row.open .note-item{border-right:1px solid var(--line);border-radius:10px}
.note-acts{
  display:flex;align-items:stretch;overflow:hidden;width:0;flex:none;
  transition:width .18s cubic-bezier(.3,.9,.4,1);
}
.note-row.sw .note-acts{transition:none}          /* mentre trascini segue il dito */
.note-row.open .note-acts{width:110px}
/* due tasti tondi, staccati: gli spigoli vivi del cestino erano appuntiti */
.note-acts button{
  width:50px;flex:none;border:none;cursor:pointer;display:grid;place-items:center;
  color:#fff;font-size:15px;border-radius:10px;
}
.na-arch{background:var(--ai);margin-left:6px}
.na-del{background:var(--shu);margin-left:4px}
.note-acts button:active{filter:brightness(.9)}
.note-row:hover .note-item,.note-row:hover .note-more{border-color:var(--sel,var(--shu))}
.note-row.on .note-item,.note-row.on .note-more{border-color:var(--sel,var(--shu));background:var(--sel-bg,#FBF1EF)}
/* la data non va mai a capo: se il segnalibro è lungo, si accorcia lui (…) */
.note-item .d{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden}
/* ---- Segnalibro: la linguetta con la categoria, a destra della data ----
   La coda a V a destra la fa il clip-path: è la forma del nastro dei
   segnalibri, e si riconosce anche da lontano fra le righe dell'elenco.
   Larghezza standard con i puntini: così non mangia lo spazio della data. */
.note-cat{
  flex:0 1 auto;min-width:0;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--ai-soft);color:var(--ai);
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.02em;
  line-height:1;padding:3px 11px 3px 7px;margin-left:auto;
  clip-path:polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
  border-radius:3px 0 0 3px;
}
.note-row.on .note-cat{background:var(--sel-bg,#F6E2DE);color:var(--sel,var(--shu-deep))}
.note-row.arch .note-cat{background:var(--paper);color:var(--ink-soft)}
/* la stessa linguetta nella testata dell'appunto, dove si mette e si toglie */
.note-catbtn{
  flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px dashed var(--line);background:transparent;color:var(--ink-soft);
  font-family:var(--sans);font-size:11px;font-weight:700;
  height:22px;padding:0 9px;border-radius:6px;cursor:pointer;align-self:center;
  transition:.12s;
}
.note-catbtn:hover{border-color:var(--ai);color:var(--ai)}
.note-catbtn.on{
  border-style:solid;border-color:transparent;
  background:var(--ai-soft);color:var(--ai);
  padding:0 13px 0 9px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}
/* popup del segnalibro: scrivi il tuo o riprendi uno già usato */
.cat-pop{width:min(258px,92vw)}
.cat-in{
  width:100%;margin:8px 0 2px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:9px;
  font-family:var(--sans);font-size:13.5px;background:#fff;
}
.cat-in:focus{outline:none;border-color:var(--ai)}
.cat-usate{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px;padding:3px}
.cat-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:11.5px;line-height:1;
  padding:6px 10px;border-radius:99px;cursor:pointer;
}
/* col colore della categoria: un pallino davanti (che mostra anche la sfumatura,
   via --lcg), e da scelta la pastiglia si accende di quel colore/sfumatura.
   Il bordo resta un colore pieno (--lc): border-color non accetta i gradienti. */
.cat-chip[style*="--lc"]::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--lcg,var(--lc));flex:none;
}
.cat-chip:hover{border-color:var(--lc,var(--ai));color:var(--ink)}
.cat-chip.on{background:var(--lcg,var(--lc,var(--ai)));border-color:var(--lc,var(--ai));color:#fff}
.cat-chip.on[style*="--lc"]::before{background:#fff}
/* ---- tavolozza sfumatura nel popup del segnalibro ---- */
.cat-gradchk{display:flex;align-items:center;gap:7px;margin:9px 0 2px;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);cursor:pointer}
.cat-gradchk input{width:15px;height:15px;accent-color:var(--ai);cursor:pointer}
.cat-gradb{margin-top:2px}
.cat-gradprev{height:16px;border-radius:8px;margin-top:8px;border:1px solid var(--line)}
/* ---- rotella delle impostazioni degli appunti + suo popup ----
   sta attaccata al titolo, non spinta all'angolo: da sola in fondo a destra
   finiva sotto alla × e sembrava sua */
#notes .g-titlerow{justify-content:flex-start;gap:10px}
.notes-cfg-btn{
  flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition:.14s;
}
.notes-cfg-btn:hover{border-color:var(--ai);color:var(--ai)}
.notes-cfg-btn svg{width:18px;height:18px}
.notescfg-pop{width:min(280px,92vw)}
/* modalità cancellazione: le pastiglie diventano rosse e si tolgono con un tocco */
.cat-chip.cat-del{border-color:var(--shu);color:var(--shu-deep);gap:8px}
.cat-chip.cat-del:hover{background:#F5E4E2;border-color:var(--shu)}
.cat-chip.cat-del::before{display:none}                 /* niente pallino colore qui */
/* riga dei due «modi» sotto le pastiglie: gestione colori · elimina */
.cat-mgr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:2px 0}
.cat-dellink.on{color:var(--shu-deep)}
.cat-dellink:hover{color:var(--shu)}
/* ---- riga del colore nel popup del segnalibro ---- */
.cat-collab{
  font-family:var(--title);font-weight:900;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin:12px 0 6px;
}
.cat-colors{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cat-sw{
  width:24px;height:24px;border-radius:50%;border:2px solid #fff;cursor:pointer;
  box-shadow:0 0 0 1px var(--line);padding:0;position:relative;
  display:grid;place-items:center;transition:transform .1s;
}
.cat-sw:hover{transform:scale(1.12)}
.cat-sw.on{box-shadow:0 0 0 2px var(--ink)}
.cat-sw-free{color:var(--ink-soft);background:#fff;overflow:hidden}
.cat-sw-free input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cat-sw-none{background:#fff;color:var(--ink-soft);font-size:14px;line-height:1}
.cat-manage{
  display:flex;align-items:center;gap:6px;width:100%;margin-top:12px;
  border:none;background:none;color:var(--ai);cursor:pointer;
  font-family:var(--sans);font-size:12px;padding:4px 2px;
}
.cat-manage:hover{text-decoration:underline}

/* ---- I due setacci sopra al primo appunto: data a sinistra, segnalibro a
   destra, ognuno col suo nome sopra — due tendine gemelle non si capiva quale
   fosse quale. ---- */
/* Niente riquadro attorno: la sua cornice rientrava di 7px e i due filtri
   non stavano più a filo con le righe degli appunti sotto. Adesso i due
   riquadrini arrivano loro fino ai bordi, uno a sinistra e uno a destra. */
/* I filtri stanno FUORI dal riquadro che scorre (vedi .notes-listbox): con lo
   sticky le righe passavano dietro e si intravedevano dai lati e da sopra.
   Così non c'è proprio niente che possa passarci sotto. */
.notes-filtri{
  display:flex;align-items:stretch;gap:8px;flex:none;
  position:relative;z-index:2;
}
/* Niente ombra: sotto la fascia dei filtri compare un filo netto, e solo
   quando l'elenco è davvero sceso — la sfumatura sembrava una sbavatura. */
.notes-filtri::after{
  content:"";position:absolute;left:2px;right:2px;top:calc(100% + 3px);height:1px;
  background:var(--line);opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.notes-listbox.scorso .notes-filtri::after{opacity:1}
.nf-g{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 8px 7px;
}
.notes-filtri.on .nf-g{border-color:var(--ai)}
.nf-lab{
  font-family:var(--title);font-weight:900;font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);padding-left:2px;
}
.nf-btn,.notes-filtri .pk-btn{
  width:100%;min-width:0;height:28px;flex:none;
  display:flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:#fff;border-radius:8px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink);
  padding:0 8px;cursor:pointer;
}
.nf-btn.on,.notes-filtri .pk-btn.set{border-color:var(--ai);color:var(--ai)}
.nf-btn:hover{border-color:var(--ai)}
.nf-v,.notes-filtri .pk-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.nf-car{flex:none;color:var(--ink-soft);font-size:9px}

/* ---- Calendario del filtro: i giorni con appunti sono cerchiati ---- */
.cal-pop{width:min(280px,92vw)}
.cal-top{display:flex;align-items:center;gap:6px;margin:2px 18px 10px 0}
.cal-mese{
  flex:1;text-align:center;font-family:var(--title);font-weight:900;
  font-size:13.5px;color:var(--ink);text-transform:capitalize;
}
.cal-nav{
  flex:none;width:26px;height:26px;border:1px solid var(--line);background:#fff;
  border-radius:8px;color:var(--ink-soft);font-size:14px;line-height:1;cursor:pointer;
}
.cal-nav:hover{border-color:var(--ai);color:var(--ai)}
.cal-gg,.cal-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-gg{margin-bottom:4px}
.cal-gg span{
  text-align:center;font-family:var(--sans);font-size:9.5px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.04em;
}
.cal-g{
  height:30px;border:none;background:transparent;border-radius:50%;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);cursor:pointer;
  display:grid;place-items:center;transition:.12s;
}
.cal-g:hover{background:var(--paper);color:var(--ink)}
.cal-vuota{height:30px}
/* il cerchio rosso: qui dentro c'è qualcosa di scritto */
.cal-g.ha{color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--shu)}
.cal-g.ha:hover{background:#FBF1EF}
.cal-g.sel{background:var(--ai);color:#fff;box-shadow:none}
.cal-g.sel:hover{background:var(--ai);color:#fff}
.cal-pie{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
}
.cal-leg{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-soft)}
.cal-pt{
  width:12px;height:12px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--shu);
}
.cal-tutte{
  margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-family:var(--sans);font-size:11px;font-weight:700;
  padding:6px 11px;border-radius:8px;cursor:pointer;
}
.cal-tutte:hover{border-color:var(--shu);color:var(--shu)}
.note-item .t{display:block;font-weight:700;font-size:13px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* piede della colonna: archiviati e "nuovo" affiancati, larghi uguali */
/* I due tasti in fondo sono una coppia: stessa altezza, stesso raccordo,
   stesso corpo di testo, e mezza riga per uno. */
.notes-foot{display:flex;gap:8px;align-items:stretch}
.notes-foot>button{
  flex:1 1 0;min-width:0;height:36px;padding:0 10px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--sans);font-size:12px;font-weight:700;
}
.notes-archbtn{border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.notes-archbtn:hover{background:var(--paper);color:var(--ink)}
.notes-archbtn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.notes-newbtn{border:1px solid var(--ink)}
/* archiviati: restano leggibili ma si fanno da parte */
.note-row.arch .note-item,.note-row.arch .note-more{background:var(--paper);border-style:dashed;opacity:.62}
.note-row.arch .note-item .t{font-weight:600;color:var(--ink-soft)}
.note-row.arch.on .note-item,.note-row.arch.on .note-more{opacity:1;border-style:solid}
/* il pulsante che apre l'elenco: solo sul telefono (lì l'elenco è nascosto) */
.notes-pick{display:none}
/* evidenziatore: livello dietro alla textarea, mostra solo i rettangoli */
.notes-tawrap{position:relative;background:#fff;border-radius:12px}
.notes-sheet .notes-tawrap{background:transparent}
.notes-tawrap .notes-ta{position:relative;background:transparent;display:block}
.notes-hl{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  padding:14px 16px;border:1.5px solid transparent;border-radius:12px;
  font-family:var(--sans);font-size:15px;line-height:1.8;
  white-space:pre-wrap;word-wrap:break-word;color:transparent;
  tab-size:4;-moz-tab-size:4;   /* stesso tab del textarea: resta allineato */
}
.notes-hl mark{background:#F8DFA0;color:transparent;border-radius:3px}
/* ---- Telefono: due righe pulite sopra il foglio ----
   riga 1 = quale appunto (tendina) + archivio + nuovo · riga 2 = ricerca.
   L'elenco a sinistra sparisce (non ci sta): al suo posto la tendina. */
@media (max-width:700px){
  #notes .game-panel{max-width:none;padding-bottom:0}
  .notes-wrap{flex-direction:column;gap:8px}
  .notes-side{
    order:-1;width:100%;display:grid;gap:6px;
    grid-template-columns:minmax(0,1fr) auto;align-items:center;
  }
  /* la tendina è nostra: un pulsante che apre l'elenco vero, con lo swipe */
  .notes-pick{
    display:flex;align-items:center;gap:8px;grid-row:1;grid-column:1;
    width:100%;height:var(--ctl);padding:0 10px;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;background:#fff;
    font-family:var(--sans);text-align:left;
  }
  .notes-pick .np-d{font-size:11px;color:var(--ink-soft);flex:none}
  .notes-pick .np-t{font-size:13px;font-weight:700;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
  .notes-pick .np-caret{color:var(--ink-soft);flex:none}
  .notes-side.list-open .notes-pick{border-color:var(--shu)}
  /* L'elenco compare sotto al pulsante, come una tendina vera.
     Il selettore parte da #notes apposta: più avanti c'è
     `#notes .notes-listbox{max-height:none}` per la colonna del computer, e senza
     l'id qui quella vincerebbe — la tendina cresceva a dismisura invece di
     scorrere, e con molti appunti finiva fuori dal pannello. */
  .notes-side{position:relative}
  #notes .notes-side.list-open .notes-listbox{
    display:flex;position:absolute;left:0;right:0;top:100%;z-index:30;
    margin-top:6px;max-height:min(52vh,340px);padding:8px;
    /* l'altezza vera la calcola notesListOpen: fin dove arriva il foglio */
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.24);
  }
  /* archiviati e "nuovo" restano appaiati alla tendina, alti uguali a lei */
  .notes-foot{grid-row:1;grid-column:2;gap:6px}
  .notes-foot>button{flex:none;height:var(--ctl)}
  .notes-archbtn{width:auto;padding:0 11px;font-size:12.5px}
  .notes-archbtn .ab-t{display:none}          /* solo icona e numero */
  .notes-foot .notes-newbtn{flex:none;width:var(--ctl);height:var(--ctl);padding:0;font-size:19px}
  .notes-newbtn .nb-t{display:none}
  .notes-search{grid-row:2;grid-column:1/-1}
  .notes-count,.notes-listbox{display:none}
  .notes-head{padding:8px 13px 4px}
  .note-title{font-size:19px}
  /* Barra degli strumenti: sul telefono solo icone, più grandi, dentro tasti
     della stessa misura di prima. Ci stanno tutte senza scorrere di lato. */
  .notes-tools{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;justify-content:space-between}
  .notes-tools::-webkit-scrollbar{display:none}
  .notes-tools .nt-btn{flex:none;padding:0 12px}
  .notes-tools .nt-t{display:none}
  .notes-tools .nt-btn svg{width:23px;height:23px;stroke-width:1.8}
  .notes-sheet{min-height:240px}
}

/* ---- Appunti, impianto rivisto: pannello a tutta altezza, elenco a
   sinistra, foglio fisso che scorre al suo interno ---- */
/* ---- il posto del dizionario, negli appunti ----
   Negli altri pannelli il contenuto scorre, e per non farsi coprire dal
   pulsante 辞書 basta un po' di padding in fondo: la roba scorre più su e si
   legge tutta. Qui NO: il pannello è alto quanto lo schermo e dentro non
   scorre niente (a scorrere sono le colonne). Quel padding non spostava
   niente, si limitava a mangiare 108px di foglio lasciando una fascia vuota
   sotto — proprio lo spazio che serviva per scrivere.
   Perciò qui il conto si fa sull'ALTEZZA: il pannello finisce sopra al
   pulsante e basta, e dentro il padding torna a zero. */
#notes > .game-panel > .game-corpo{padding-bottom:6px}
/* Lo sfondo aggancia i pannelli IN ALTO (padding 26px): quindi il conto si
   fa dall'alto, non col centraggio — 26 di stacco sopra, la fascia del
   pulsante sotto, e dieci di respiro fra il pannello e il pulsante. Col
   margine, invece, restavano cinquanta pixel di vuoto che non serviva a
   nessuno: né al foglio, né al dizionario. */
#notes .game-panel{
  height:calc(100dvh - 26px - var(--qk-fab) - 10px);
  /* 1000px è il minimo di sempre, non più il massimo: da lì in su decide chi
     tira le maniglie (la larghezza scelta se la ricorda il dispositivo) */
  width:min(1000px, calc(100vw - 26px));max-width:calc(100vw - 26px);
  display:flex;flex-direction:column;
  /* il ritaglio sta sul corpo, non qui: se lo mettevo sul pannello tagliava
     anche la × che sporge dall'angolo, come in tutte le altre schede */
  overflow:visible;
}
/* niente scorrimento nel corpo: l'impianto è a colonne di altezza fissa e a
   scorrere è solo l'elenco. Con `auto` (che arriva da .game-corpo) scorreva
   tutto, testata compresa, e la sua barra passava sopra le righe. */
#notes-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#notes .notes-wrap{flex:1;min-height:0}
#notes .notes-main{display:flex;flex-direction:column;min-height:0}
#notes .notes-sheet{flex:1;min-height:0}
#notes .notes-ta{height:100%;min-height:0;resize:none}
#notes .notes-side{min-height:0}
#notes .notes-list{max-height:none}   /* l'altezza la dà il riquadro */
/* le parole già nel quaderno si sottolineano da sole (livello dietro) */
.notes-hl u.kn{
  text-decoration:underline dotted rgba(39,75,109,.6);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
/* già trasferito nel quaderno: riga rossa sopra. Il colore va indicato a mano,
   perché qui il testo è trasparente e la linea ne erediterebbe il colore. */
.notes-hl s.dn{
  text-decoration:line-through;
  text-decoration-color:rgba(192,57,43,.85);
  text-decoration-thickness:2px;
}
.notes-hl s.dn u.kn{ text-decoration-color:rgba(192,57,43,.45) }
/* popup flottante della selezione */
.notepop{
  position:fixed;z-index:var(--z-pop);max-width:min(340px,92vw);
  /* se il contenuto è lungo scorre il popup, non la pagina */
  max-height:min(78dvh,620px);overflow:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);padding:11px 12px;font-family:var(--sans);
}
/* la testata (maniglia, titolo e ×) resta agganciata in alto mentre si scorre */
.np-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:-11px;z-index:2;background:#fff;
  margin:-11px -12px 0;padding:11px 12px 7px;
  /* il dito trascina il popup, non la pagina sotto: senza questo lo spostamento
     sul telefono va a scatti perché il browser prova anche a scorrere */
  touch-action:none;cursor:grab;
}
.np-head:active{cursor:grabbing}
.np-x{border:none;background:none;color:var(--ink-soft);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.np-x:hover{color:var(--shu)}
.np-known{
  margin:7px 0 2px;font-size:12.5px;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 9px;
}
.np-known .np-r{font-family:var(--serif);color:var(--ai);font-size:13.5px}
.np-btns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.np-btns .btn{width:100%;text-align:left;font-size:12.5px;padding:8px 11px}
.notepop .notes-formrow{margin-top:8px;padding:8px;border:none;background:var(--paper)}
.notepop .notes-formrow input{min-width:100px;font-size:12.5px}

/* ---- Appunti: tooltip dei significati al passaggio del mouse ---- */
.notetip{
  position:fixed;z-index:var(--z-tip);max-width:min(320px,90vw);pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 10px 28px rgba(0,0,0,.26);padding:9px 12px;font-family:var(--sans);
}
.nt-w{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:3px}
/* com'era scritta nell'appunto, quando il riquadro mostra la voce del
   quaderno: 勉強 in testa, «べんきょう» piccolo di fianco */
.nt-da{font-weight:400;font-size:12px;color:var(--ink-soft)}
.nt-row{font-size:12.5px;color:var(--ink-soft);padding:2px 0;line-height:1.5}
.nt-row b{font-family:var(--serif);color:var(--ai);font-size:13.5px}

/* ---- riordino delle parole: pulsante Riordina + maniglia trascinabile ---- */
.ex-mv{display:flex;align-items:center;justify-content:center;align-self:center}
.ex-mv.drag{
  color:var(--ink-soft);font-size:14px;line-height:1;cursor:grab;
  touch-action:none;user-select:none;padding:6px 2px;border-radius:6px;
}
.ex-mv.drag:hover{color:var(--shu);background:#F6F1EE}
.ex-row.ex-dragging{
  background:#FBF1EF;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  position:relative;z-index:5;
}
.ex-row.ex-dragging .ex-mv.drag{cursor:grabbing}
/* il gruppo si trascina come una riga qualunque: stessa maniglia, stessa
   evidenza mentre lo si sposta. Non si apre e non si chiude finché si
   riordina, o si finirebbe per spostare le sue parole una a una. */
.ex-serie2.es2-reord{cursor:default;padding-left:0}
.ex-serie2.es2-reord .ex-mv.drag{flex:none;width:20px}
.ex-serie2.ex-dragging{
  background:#FBF1EF;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  position:relative;z-index:5;
}
.ex-serie2.ex-dragging .ex-mv.drag{cursor:grabbing}
.ex-secline{display:flex;align-items:baseline;gap:8px}
.ex-reord-btn{
  margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer;
}
.ex-reord-btn:hover{color:var(--shu);border-color:var(--shu)}
.ex-reord-btn.on{background:var(--shu);border-color:var(--shu);color:#fff}

/* ---- Popup «Ordina le parole» ----
   Piccolo e agganciato al pulsante, come quello che divide la lettura per
   kanji: si sceglie una cosa sola, non serve coprire tutto lo schermo. */
.xs-pop{width:min(272px,92vw)}
.xs-list{display:flex;flex-direction:column;gap:5px;margin:8px 0 6px}
.xs-row{display:flex;align-items:center;gap:6px}
.xs-n{
  flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--ink-soft);
  font-family:var(--title);font-weight:900;font-size:10px;
}
.xs-row .pk-btn{flex:1;min-width:0;height:30px}
.xs-dir{
  flex:none;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  height:30px;padding:0 7px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.xs-dir:hover{border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}
.xs-del{
  flex:none;width:22px;height:22px;border-radius:6px;background:transparent;
  color:#C7C4BB;font-size:15px;display:grid;place-items:center;cursor:pointer;
}
.xs-del:hover{background:#F5E4E2;color:var(--shu-deep)}
.xs-del-sp{flex:none;width:22px}
.xs-add{
  display:inline-flex;align-items:center;gap:4px;
  border:1px dashed var(--line);background:transparent;color:var(--ai);
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  padding:5px 10px;border-radius:8px;cursor:pointer;
}
.xs-add:hover{border-color:var(--ai);background:var(--ai-soft)}
.xs-add svg{width:13px;height:13px}
.xs-all{margin:9px 0 2px;font-size:12.5px}
.xs-note{font-size:11px;color:var(--ink-soft);margin:0 0 2px;line-height:1.35}
.xs-go{margin-top:10px}
.xs-go .rc-done{flex:1}

/* i due pulsanti sopra l'elenco delle parole */
.ex-secbtns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.ex-secbtns .ex-reord-btn{margin-left:0;display:inline-flex;align-items:center;gap:4px}
.ex-secbtns .ex-reord-btn svg{width:13px;height:13px}
@media (max-width:560px){
  .ex-secbtns .ex-reord-btn{font-size:10.5px;padding:3px 8px}
}

/* ---- «Portarla qui?»: elenco di quello che si sposta sotto il kanji ----
   Una scheda per parola, con lettura, livello, significato, label e quante
   frasi si porta dietro: si vede cosa succede prima di dire di sì. */
.wp-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px}
.wp-item{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:11px 13px;
}
.wp-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wp-w{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.wp-r{font-family:var(--serif);font-size:14px;color:var(--ai)}
.wp-m{font-size:13.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.wp-extra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.wp-tag{
  font-size:11.5px;line-height:1;padding:4px 9px;border-radius:99px;
  background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--lc,var(--line));
}
.wp-sen{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;color:var(--ink-soft);
}
.wp-go{display:flex;gap:10px;margin-top:18px}
.wp-go .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
@media (max-width:480px){
  .wp-go{flex-direction:column-reverse}   /* il tasto che agisce sta sotto il pollice */
}

/* ---- Pressione lunga su una scelta col contatore: quali sono accese ---- */
.pk-tip{
  position:fixed;z-index:var(--z-menu);display:flex;flex-wrap:wrap;gap:4px;
  max-width:min(260px,88vw);pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.24);padding:7px 8px;font-family:var(--sans);
}
.pk-tip-v{
  font-size:12px;line-height:1;padding:4px 8px;border-radius:99px;
  background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--lc,var(--line));
}
.pk-tip-no{font-size:12px;color:var(--ink-soft)}

/* ---- menu "Esercitati" nell'header ---- */
.ex-wrap{grid-column:2;justify-self:start;position:relative}
@media (max-width:700px){
  /* Il tasto "Esercitati" prende tutta la seconda riga della testata (la
     collocazione sta qui perché è qui che nasce .ex-wrap, altrimenti la regola
     di partenza vincerebbe lo stesso). Il menu scende sotto di lui, largo
     uguale, invece di aprirsi centrato a metà schermo. */
  .ex-wrap{grid-column:1 / -1;grid-row:2;justify-self:stretch;width:100%}
  #exMenu{left:0;right:0;width:auto;transform:none;min-width:0}
}
@media print{ .ex-wrap{display:none!important} }

/* ---- Appunti: maniglia del popup, contatore pagine ---- */
.np-drag{color:var(--ink-soft);font-size:13px;cursor:grab;padding-right:2px}
.np-head{cursor:grab}
.np-head:active{cursor:grabbing}
.notes-count{font-size:11.5px;color:var(--ink-soft);text-align:right;padding:0 3px 2px}
@media (max-width:700px){
  .notes-count{flex:none;white-space:nowrap}
}


/* ---- telefono: "＋ Inserisci in…" al posto di "＋ Nuova scheda" ---- */
.notes-ins{
  position:fixed;right:18px;bottom:20px;z-index:var(--z-picker);
  align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:12px;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  padding:13px 18px;line-height:1;cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.notes-ins:active{background:#000}
@media (min-width:701px){ .notes-ins{display:none!important} }   /* solo telefono */
@media print{ .notes-ins{display:none!important} }

/* ---- popup appunti: frasi con traduzione dopo kanji/parola ---- */
.np-sub{font-size:12px;color:var(--ink-soft);margin:10px 0 6px}
.np-added{display:flex;flex-direction:column;gap:3px;margin:6px 0 0}
.np-added-row{font-size:12px;color:#0d7a3d;line-height:1.45}
.np-fine{width:100%;margin-top:10px}

/* ---- evidenziatore: colori presi dalle label del quaderno ---- */
.notes-hlmenu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.nhl-chip{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:12px;line-height:1;
  padding:6px 10px;border-radius:999px;cursor:pointer;
}
.nhl-chip:hover{border-color:var(--ink-soft)}
.nhl-off{color:var(--ink-soft)}
.nhl-back{font-weight:700}
/* principale con sottocategorie: la pastiglia e il suo ＋ attaccati */
.nhl-fam{display:inline-flex;align-items:stretch}
.nhl-fam .nhl-chip{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.nhl-plus{
  border:1px solid var(--line);border-left:1px dashed var(--line);
  background:#fff;color:var(--ink-soft);cursor:pointer;
  border-radius:0 999px 999px 0;padding:0 9px;font-size:11px;line-height:1;
}
.nhl-plus:hover{background:var(--paper);color:var(--ink)}
/* testo evidenziato nel foglio (livello dietro, testo trasparente) */
.notes-hl .nmk{border-radius:4px;background:rgba(201,127,53,.28)}

/* ---- popup: moduli con label e JLPT ---- */
.notepop .np-grid{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.notepop .np-grid input,.notepop .np-grid select{width:100%;min-width:0}
.np-go{width:100%}
.np-jlrow{margin:8px 0 2px}
/* le scelte a pastiglie (JLPT · Label · Dove) stanno in css/15-scelte.css:
   sono un widget condiviso con le righe delle parole nelle schede */

/* ---- selezione a tocco: pulsante e barretta con le frecce ----
   Solo dove non c'è il mouse (hover:none): col mouse si seleziona già bene,
   e la finestra stretta del desktop non deve far comparire il pulsante. */
.nt-selbtn{display:none}
@media (hover:none){
  .nt-btn.nt-selbtn{display:inline-flex}
  .nt-sep.nt-selbtn{display:block}
}
/* rete di sicurezza: appena arriva un tocco vero, il pulsante c'è comunque */
body.qk-touch .nt-btn.nt-selbtn{display:inline-flex}
body.qk-touch .nt-sep.nt-selbtn{display:block}
.nt-btn.nt-selbtn.on{background:var(--ai);border-color:var(--ai);color:#fff}
/* Barra della selezione: tre gruppi in fila sotto la formattazione, uno stesso
   blocco chiaro. Sinistra e destra muovono i due bordi, in mezzo copia,
   incolla e taglia. */
.notes-selbar{
  display:flex;align-items:stretch;gap:6px;margin:0 0 10px;
  padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
}
.nsb-g{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:#fff;border-radius:9px;padding:4px 4px 5px;
}
.nsb-lab{
  font-family:var(--title);font-weight:900;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
.nsb-btns{display:flex;align-items:center;gap:2px}
.nsb-mid{flex:1.35}
/* In modalità tocco la selezione è nostra: al foglio togliamo quella di
   sistema — la barra dei suggerimenti, i maniglioni e il richiamo lungo di
   iOS. Il titolo dell'appunto resta scrivibile: il blocco vale solo sul testo. */
.notes-ta.sel-own{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  caret-color:transparent;
}
.notes-sheet.sel-own .notes-tawrap,
.notes-sheet.sel-own .notes-tawrap *{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
/* i rettangoli della nostra selezione, dietro al testo */
.notes-selpaint{position:absolute;inset:0;pointer-events:none;z-index:0}
.notes-selpaint i{position:absolute;background:rgba(85,128,188,.30);border-radius:2px}

.notes-selbar button{
  border:none;background:var(--paper);border-radius:8px;cursor:pointer;
  min-width:38px;height:32px;color:var(--ink);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.notes-selbar button svg{width:17px;height:17px}
.notes-selbar button:hover:not(:disabled){background:var(--ai-soft);color:var(--ai)}
.notes-selbar button:active:not(:disabled){background:var(--ai);color:#fff}
.notes-selbar button:disabled{opacity:.3;cursor:default}
/* il tasto di mezzo: acceso vuol dire che ＋ e − vanno a parole */
.notes-selbar .nsb-word.on{background:var(--ai);color:#fff}
.notes-selbar .nsb-word.on:hover{background:var(--ai);color:#fff}
@media (max-width:420px){
  .notes-selbar{gap:4px;padding:4px}
  .nsb-g{padding:3px 2px 4px}
  .notes-selbar button{min-width:0;flex:1;height:30px}
  .notes-selbar button svg{width:16px;height:16px}
  .nsb-btns{width:100%}
}

/* ---- «Sposta questa parola»: il comando accanto alla maniglia ⠿ ---- */
.ex-mvto{
  display:grid;place-items:center;align-self:center;
  width:28px;height:28px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink-soft);cursor:pointer;transition:.12s;
}
.ex-mvto:hover{border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}
.ex-mvto svg{width:15px;height:15px}
/* ---- scegliere più parole e spostarle in una volta sola ----
   La freccia è anche la spia: blu piena = questa parola è nella lista.
   La spunta accanto è per computer e tablet; sul telefono si tiene premuta
   la freccia, e lì la spunta darebbe solo un bersaglio in più da sbagliare
   in uno spazio che non c'è. */
.ex-mvwrap{display:inline-flex;align-items:center;gap:6px;flex:none}
.ex-mvto.sel{
  background:var(--ai);border-color:var(--ai);color:#fff;
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--ai) 60%,transparent);
}
.ex-mvto.sel:hover{background:var(--ai);color:#fff}
.mv-ck{width:16px;height:16px;flex:none;accent-color:var(--ai);cursor:pointer;margin:0}
@media (max-width:560px){ .mv-ck{display:none} }
/* la riga del raggruppamento: il comando sta in fondo, staccato dal resto */
.ex-serie2 .ex-mvwrap{margin-left:6px}
.ex-serie2 .ex-mvto{width:26px;height:26px}
/* ---- la barra di chi ha scelto ----
   In fondo allo schermo, sopra a tutto: dice quante sono e le sposta. Non
   copre i pulsanti flottanti — sta al centro e loro stanno ai lati. */
.mv-barra{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:2147482700;
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);border-radius:99px;
  padding:8px 8px 8px 16px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  font-family:var(--sans);font-size:13px;
  animation:mvb-in .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes mvb-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.mvb-n{font-weight:700;white-space:nowrap}
.mv-barra button{
  border:none;border-radius:99px;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;font-weight:700;
}
.mvb-go{background:var(--ai);color:#fff;padding:8px 15px;white-space:nowrap}
.mvb-go:hover{filter:brightness(1.12)}
.mvb-x{background:rgba(255,255,255,.16);color:#fff;width:30px;height:30px;font-size:17px;line-height:1}
.mvb-x:hover{background:rgba(255,255,255,.3)}
@media (max-width:560px){
  /* sul telefono i due pulsanti flottanti stanno in basso: la barra si mette
     sopra di loro, non addosso */
  .mv-barra{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100vw - 16px)}
  .mvb-n{font-size:12px}
}
/* l'elenco di quello che si sta spostando, dentro al popup */
.mv-elenco{
  font-family:var(--serif);font-size:13px;color:var(--ink);line-height:1.6;
  max-height:84px;overflow:auto;margin:6px 0 2px;
}
.mv-pop{width:min(268px,92vw)}
.mv-dest{margin:9px 0 4px}
.mv-dest .pk-btn{width:100%;height:32px}
.mv-nota{font-size:11px;color:var(--ink-soft);line-height:1.4;margin:2px 0 0}
.mv-frasi{margin:10px 0 0;font-size:12.5px;align-items:flex-start}
.mv-go{margin-top:12px}
.mv-go .rc-done{flex:1}
.mv-go .rc-done:disabled{opacity:.4;cursor:default}

/* segnalibri · modo «rinomina»: casella + pulsante sotto le pastiglie */
.cat-renrow{display:flex;gap:6px;align-items:center;margin-top:8px}
.cat-renrow .cat-in{flex:1;min-width:0;margin:0}
.cat-renrow .rc-done{flex:none;white-space:nowrap}
.cat-renrow .rc-done:disabled{opacity:.45;cursor:default}
.cat-renrow .cat-in:disabled{opacity:.6}

/* ============================================================
   対訳 — IL FOGLIO DI TRADUZIONE (testi e canzoni)
   Tre riquadri: originale e traduzione affiancati, annotazioni sotto.
   I due divisori si trascinano e la misura resta sul dispositivo.
   ============================================================ */
.trad-sheet{display:flex;flex-direction:column;min-height:0}
.trad-wrap{
  --trx:50%; --try:190px;
  display:grid;grid-template-rows:minmax(120px,1fr) 10px var(--try);
  flex:1;min-height:min(62vh,520px);margin-top:10px;
}
.trad-alto{display:grid;grid-template-columns:var(--trx) 10px minmax(0,1fr);min-height:0}
.trad-pan{display:flex;flex-direction:column;min-width:0;min-height:0}
.trad-pan-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;min-height:24px}
.trad-lab{
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);flex:1;min-width:0;
}
/* «＋ Annotazione» era una pastiglia sottile accanto a 漢字/かな, che invece
   sono alte due righe: due comandi nella stessa riga con due statture diverse
   sembrano uno importante e uno di scarto. Adesso sono alti uguali. */
.trad-add{
  flex:none;display:inline-flex;align-items:center;gap:5px;min-height:30px;
  border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:0 13px;font-family:var(--sans);font-size:12px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;white-space:nowrap;
}
/* ---- il ＋ Annotazione: uno solo, in cima, accanto alla data ----
   Ce n'erano due identici, uno per riquadro, e facevano la stessa cosa: la
   selezione ce l'ha un testo solo per volta, quindi il pulsante può essere
   uno solo e capire da sé dove stai lavorando. */
.trad-add-uno{margin-left:auto;margin-right:6px}
/* ---- 漢字 / かな DENTRO alla casella ----
   Riguarda quel testo lì, non il foglio: sta appoggiato in alto a destra
   sopra al testo, e non ruba una riga alla testata. */
.trad-seg-dentro{
  position:absolute;z-index:3;top:6px;right:16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  box-shadow:0 1px 6px rgba(20,20,18,.10);
}
/* il testo comincia sotto al selettore, se no la prima riga ci finisce dietro */
.trad-pan[data-lato="jp"] .trad-hl,.trad-pan[data-lato="jp"] .trad-ta,
.trad-pan[data-lato="kana"] .trad-hl,.trad-pan[data-lato="kana"] .trad-ta{padding-top:42px}
.trad-add:hover{border-color:var(--ai);color:var(--ai)}
/* la casella e il suo gemello di sola lettura, uno esattamente sopra l'altro */
.trad-tawrap{position:relative;flex:1;min-height:0}
.trad-hl,.trad-ta{
  position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  font-family:var(--serif);font-size:15px;line-height:1.9;
  white-space:pre-wrap;overflow-wrap:break-word;overflow:auto;
}
.trad-hl{
  color:transparent;background:#fff;pointer-events:none;z-index:0;
  border-color:transparent;
}
.trad-ta{
  background:transparent;color:var(--ink);z-index:1;resize:none;
}
.trad-ta:focus{outline:none;border-color:var(--ai)}
.trad-pan[data-lato="tr"] .trad-hl,.trad-pan[data-lato="tr"] .trad-ta{font-family:var(--sans);font-size:14px}
/* il pezzo annotato e il suo numerino in alto a destra */
.trad-seg{border-bottom:1.5px solid color-mix(in srgb,var(--ai) 55%,transparent)}
.trad-n{
  font-family:var(--sans);font-size:9.5px;font-weight:800;color:var(--ai);
  vertical-align:super;line-height:0;margin-left:1px;
}
/* i divisori */
.trad-divx,.trad-divy{
  position:relative;background:none;display:grid;place-items:center;
}
.trad-divx{cursor:col-resize}
.trad-divy{cursor:row-resize}
.trad-divx::before{content:"";width:2px;height:100%;border-radius:2px;background:var(--line)}
.trad-divy::before{content:"";height:2px;width:100%;border-radius:2px;background:var(--line)}
.trad-divx:hover::before,.trad-divy:hover::before{background:var(--ai)}
body.trad-trascino,body.trad-trascino *{user-select:none!important}
/* il riquadro delle annotazioni */
.trad-basso{display:flex;flex-direction:column;min-height:0}
.trad-lab-b{flex:none;margin-bottom:4px}
.trad-elenco{
  flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:11px;
  background:#fff;padding:6px;
}
.trad-vuoto{text-align:left;margin:6px 4px}
.trad-riga{display:flex;gap:9px;align-items:flex-start;padding:7px 6px;border-bottom:1px solid #F2F0EA}
.trad-riga:last-child{border-bottom:none}
.trad-riga.persa{opacity:.6}
.trad-riga-n{
  flex:none;width:20px;height:20px;border-radius:99px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ai) 13%,#fff);color:var(--ai);
  font-family:var(--sans);font-size:10.5px;font-weight:800;margin-top:1px;
}
.trad-riga-c{flex:1;min-width:0}
.trad-riga-s{font-family:var(--serif);font-size:13.5px;color:var(--ink)}
.trad-persa{
  font-style:normal;font-family:var(--sans);font-size:9.5px;font-weight:700;
  color:#8A5A18;background:color-mix(in srgb,#C97F35 16%,#fff);
  border-radius:99px;padding:1px 7px;margin-left:5px;
}
.trad-riga-tr{font-family:var(--sans);font-size:12.5px;color:var(--ai);margin-top:1px}
.trad-riga-t{font-family:var(--sans);font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:2px}
.trad-riga-az{flex:none;display:flex;gap:3px}
.trad-riga-az button{
  width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:7px;
  cursor:pointer;color:var(--ink-soft);display:grid;place-items:center;
}
.trad-riga-az button:hover{border-color:var(--ai);color:var(--ai)}
.trad-riga-az svg{width:13px;height:13px}
/* il fumetto al passaggio del mouse sul numerino */
.tradtip{
  position:fixed;z-index:var(--z-tip);max-width:min(320px,88vw);
  display:flex;gap:9px;background:#FDFBF6;border:1px solid #E3DCCB;border-radius:12px;
  padding:9px 12px;box-shadow:0 12px 30px rgba(0,0,0,.24);pointer-events:none;
}
.tt-n{
  flex:none;width:20px;height:20px;border-radius:99px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ai) 14%,#fff);color:var(--ai);
  font-family:var(--sans);font-size:10.5px;font-weight:800;
}
.tt-s{font-family:var(--serif);font-size:13.5px;color:var(--ink)}
.tt-tr{font-family:var(--sans);font-size:12.5px;color:var(--ai);margin-top:2px}
.tt-t{font-family:var(--sans);font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:3px}
/* ---- il fogliettino dell'annotazione, che si sposta ----
   Prima era una finestra al centro col fondo scurito: per scrivere
   un'annotazione dovevi perdere di vista il pezzo di testo da cui l'avevi
   presa. Adesso si appoggia accanto al pulsante e lo si sposta prendendolo
   per la striscia in alto. */
.tradfog{
  position:fixed;z-index:var(--z-menu);width:min(340px,92vw);
  background:#FDFBF6;border:1px solid #E3DCCB;border-radius:14px;
  box-shadow:0 18px 44px rgba(20,20,18,.26);overflow:hidden;
}
.tradfog-h{
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 13px;
  background:#F5F0E4;border-bottom:1px solid #E3DCCB;cursor:grab;touch-action:none;
}
body.trad-trascino .tradfog-h{cursor:grabbing}
.tradfog-t{
  flex:1;min-width:0;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.tradfog-presa{flex:none;font-size:13px;color:#BFBBB2;letter-spacing:-2px}
.tradfog-x{
  flex:none;border:none;background:none;font-size:19px;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:0 4px;
}
.tradfog-x:hover{color:var(--shu)}
.tradfog-c{padding:11px 13px 13px}
.tradfog-c .qf-lab{margin:9px 0 4px}
.tradfog-c .qf-lab:first-of-type{margin-top:10px}
.tradfog-c .qf-az{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* il menù del ＋ (appunto o traduzione) */
.notes-newmenu{position:fixed;display:block;min-width:230px;z-index:var(--z-menu)}
/* le due caselle della finestrella dell'annotazione */
.qf-lab{
  display:block;margin:11px 0 4px;font-family:var(--sans);font-size:11px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.qf-ta{resize:vertical;min-height:64px;font-family:var(--sans);line-height:1.5}
.trad-scelto{font-family:var(--serif);font-size:15px;color:var(--ai)}
/* ---- sul telefono i tre riquadri stanno uno sotto l'altro ----
   Due testi affiancati in 375 px sono due colonne di quattro lettere: qui
   si impilano, e il divisorio verticale non serve più. */
@media (max-width:760px){
  .trad-wrap{grid-template-rows:minmax(140px,1fr) 10px var(--try)}
  .trad-alto{grid-template-columns:1fr;grid-template-rows:1fr 10px 1fr;min-height:280px}
  .trad-divx{cursor:row-resize}
  .trad-divx::before{height:2px;width:100%}
}
/* l'interruttore 漢字 / かな sul riquadro di sinistra */
.trad-seg2{display:inline-flex;gap:2px;padding:2px;background:var(--paper);border-radius:99px;flex:none}
.trad-seg2 button{
  border:none;background:none;border-radius:99px;padding:3px 10px;cursor:pointer;
  font-family:var(--serif);font-size:12px;font-weight:700;color:var(--ink-soft);
}
.trad-seg2 button.on{background:#fff;color:var(--shu);box-shadow:0 1px 3px rgba(20,20,18,.14)}

/* ---- il foglio di traduzione: respiro, numeri di riga, riga accesa ---- */
/* le etichette non devono toccare il bordo del riquadro: 10px di respiro a
   sinistra, e la riga della testata larga come il testo che c'è sotto */
.trad-pan-h{padding:0 6px 0 10px;min-height:0;margin-bottom:4px;flex-wrap:wrap;row-gap:4px}
/* ---- l'etichetta sta SOPRA, sempre ----
   «GIAPPONESE» e «TRADUZIONE» stavano in riga col selettore 漢字/かな e con
   «＋ Annotazione»: bastava stringere un po' la colonna e andavano a capo da
   soli. Tanto vale tenerli già di sopra, così la testata non cambia forma
   mentre trascini il divisorio — una riga per il nome, una per i comandi. */
/* nella testata è rimasto solo il nome: una riga sola, sottile */
.trad-pan-h .trad-lab{white-space:nowrap;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.trad-hgrp{display:flex;align-items:stretch;gap:8px;margin-left:auto}
.trad-lab-b{padding:0;flex:none}
/* ---- aria ai bordi del foglio ----
   I due riquadri toccavano il bordo della nota: qui non è un modulo, è un
   testo da leggere, e senza margine le righe finiscono incollate alla
   cornice. È un margine (non un padding) perché la misura dei divisori si
   calcola sul riquadro: col padding la presa sarebbe scivolata di 14px. */
.trad-wrap{padding-top:2px;margin-left:14px;margin-right:14px;margin-bottom:14px}
@media (max-width:760px){ .trad-wrap{margin-left:8px;margin-right:8px;margin-bottom:10px} }
/* i numeri di riga stanno nel margine sinistro e scorrono col testo: sono
   dentro alla riga stessa, così non serve sincronizzare niente */
/* aria ai due bordi: a sinistra prima dei numeri di riga, a destra
   prima del bordo del riquadro (e della barra di scorrimento) */
.trad-hl,.trad-ta{padding-left:52px;padding-right:16px}
.tl{display:block;position:relative;border-radius:4px}
.tl::before{
  content:attr(data-n);
  position:absolute;left:-36px;width:24px;text-align:right;
  font-family:var(--sans);font-size:10.5px;font-weight:600;color:#BFBBB2;
  line-height:inherit;pointer-events:none;user-select:none;
}
/* la riga scelta si accende di qua E di là: è il filo che tiene insieme
   l'originale e la traduzione */
.tl.sel{background:#F1F0EC;box-shadow:-6px 0 0 #F1F0EC, 6px 0 0 #F1F0EC}
.tl.sel::before{color:var(--ai)}
/* 漢字 / かな col romaji sotto */
.trad-seg2 button{display:flex;flex-direction:column;align-items:center;gap:0;padding:3px 12px;line-height:1.15}
.trad-seg2 button b{font-family:var(--serif);font-size:12.5px;font-weight:800}
.trad-seg2 button i{font-style:normal;font-family:var(--sans);font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;opacity:.65}
/* le annotazioni si richiudono */
.trad-basso-h{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:none;background:none;padding:3px 6px 6px 10px;cursor:pointer;
}
.trad-conta{
  font-family:var(--sans);font-size:10px;font-weight:800;color:var(--ai);
  background:var(--ai-soft);border-radius:99px;padding:1px 7px;min-width:18px;text-align:center;
}
.trad-conta:empty{display:none}
.trad-frec{margin-left:auto;font-size:10px;color:var(--ink-soft)}
.trad-basso.chiusa .trad-elenco{display:none}
.trad-wrap:has(.trad-basso.chiusa){grid-template-rows:minmax(120px,1fr) 10px 34px}
.trad-wrap:has(.trad-basso.chiusa) .trad-divy{pointer-events:none;opacity:.4}

/* ---- il quaderno si allarga (solo su computer) ----
   La misura di prima (1000px) resta il minimo, così su tablet e telefono non
   cambia niente: le maniglie compaiono solo dove c'è spazio da guadagnare. */
#notes .game-panel{position:relative}
.notes-tira{display:none}
@media (min-width:1060px) and (pointer:fine){
  .notes-tira{
    display:block;position:absolute;top:50%;transform:translateY(-50%);
    width:14px;height:74px;border-radius:8px;cursor:ew-resize;z-index:42;
  }
  .notes-tira::before{
    content:'';position:absolute;inset:5px 5px;border-radius:99px;
    background:var(--line);transition:.14s;
  }
  .notes-tira:hover::before{background:var(--ai);inset:3px 4px}
  .notes-tira-sx{left:-7px}
  .notes-tira-dx{right:-7px}
  /* mentre si tira non si seleziona testo per sbaglio */
  body.qk-tirando{user-select:none;cursor:ew-resize}
}

/* ---- la colonna delle parole che hai già (a destra negli Appunti) ---- */
/* ---- la colonna delle parole: un pannello, non una striscia ----
   Prima era attaccata al foglio con un filo grigio e si confondeva con
   l'appunto. Adesso ha una cornice sua, un fondo suo e un titolo pieno: si
   vede che è un'altra cosa, appoggiata di fianco. */
.np-col{
  flex:none;width:222px;display:flex;flex-direction:column;min-height:0;gap:7px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:10px;
}
.np-testa{display:flex;align-items:center;gap:6px;
  padding-bottom:7px;border-bottom:1px solid var(--paper-edge)}
.np-tit{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.np-n{font-family:var(--sans);font-size:10px;font-weight:800;color:var(--ai);
  background:var(--ai-soft);border-radius:99px;padding:1px 7px}
.np-x{margin-left:auto;border:none;background:none;font-size:17px;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:0 2px}
.np-x:hover{color:var(--shu)}
.np-cerca{
  width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:var(--sans);font-size:12px;padding:5px 8px;color:var(--ink);
}
/* ---- la scelta della label: l'albero delle schede, in sola lettura ----
   Prima era una tendina, e per trovare «Godan» sotto «Verbi» bisognava
   ricordarsi dov'era. Adesso è lo stesso albero delle schede — rientri,
   colori, rami — ma solo per filtrare: creare, rinominare ed eliminare
   restano cose da fare nelle schede. */
.np-lab{min-height:0;display:flex;flex-direction:column;gap:5px}
/* ---- la linguetta sul bordo: apre la colonna delle parole ----
   Al posto del pulsantino nella barra in alto, che era un'icona in mezzo ad
   altre e non diceva dove sarebbe andata a finire la roba. Una freccia
   attaccata al bordo destro dice da sola: «di qua c'è dell'altro». */
/* Una fascia su tutto il fianco, non un dentino che sporge: prima era un
   bottoncino alto 52px appiccicato al bordo e mezzo fuori dal foglio, e si
   leggeva come uno sbaglio di allineamento. Adesso è una colonna sua, alta
   quanto il foglio, col nome scritto per il lungo: si capisce che è un
   pannello chiuso, non un pezzo che avanza. */
.np-linguetta{
  flex:none;align-self:stretch;width:30px;padding:10px 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);cursor:pointer;transition:.14s;
  font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
/* il nome per il lungo: si legge dal basso verso l'alto, come sui dorsi dei
   libri in italiano */
.np-ling-t{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.np-ling-f{font-size:12px;line-height:1}
.np-linguetta:hover{border-color:var(--shu);color:var(--shu);background:#fff}
/* ---- sul telefono la fascia va in fondo, non di fianco ----
   Di fianco si mangerebbe metà della larghezza che serve a scrivere, e una
   scritta verticale su uno schermo alto 800px sarebbe lunga un dito. */
@media (max-width:900px){
  .np-linguetta{
    width:auto;align-self:auto;height:34px;padding:0 14px;
    flex-direction:row;margin-top:10px;
  }
  .np-ling-t{writing-mode:horizontal-tb;transform:none}
}
/* il fogliettino delle label: sta sopra a tutto, la colonna non si sposta */
.nplabpop{
  position:fixed;z-index:var(--z-menu);width:min(268px,88vw);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px;box-shadow:0 14px 34px rgba(20,20,18,.20);
}
.nplabpop .np-lbltree{max-height:min(48vh,340px);border:none;background:none;padding:2px}
/* il pulsante che dice il filtro di adesso e apre l'albero */
.np-labbtn{
  display:flex;align-items:center;gap:6px;width:100%;
  border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:5px 9px;cursor:pointer;font-family:var(--sans);font-size:11.5px;
  color:var(--ink-soft);text-align:left;transition:.12s;
}
.np-labbtn:hover{border-color:var(--ai);color:var(--ink)}
.np-labbtn.set{font-weight:700}
.np-labbtn.aperto{border-color:var(--ai)}
.np-labbtn-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-labbtn-f{flex:none;font-size:9px;opacity:.7}
.np-lbltree{margin:0;max-height:26vh;padding:2px 2px 4px;gap:5px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.np-lbltree .lbltree-row{padding-left:calc(var(--d,0)*12px)}
.np-lbltree .lbltree-c::before{left:calc(var(--d,0)*12px - 7px)}
.np-lbltree .lblpop-chip{padding:3px 9px;font-size:11.5px}
@media (max-width:900px){ .np-lbltree{max-height:120px} }
.np-lista{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:3px}
.np-riga{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;width:100%;text-align:left;
  border:1px solid transparent;border-radius:9px;background:none;padding:5px 7px;cursor:pointer;
}
.np-riga{background:#fff;border-color:transparent}
.np-riga:hover{background:#F6F1EE;border-color:var(--line)}
.np-w{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:700}
.np-r{font-family:var(--sans);font-size:11px;color:var(--ai)}
.np-lv{font-family:var(--sans);font-size:9px;font-weight:800;border-radius:99px;padding:0 5px;font-style:normal}
.np-m{flex:1 0 100%;font-family:var(--sans);font-size:11px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-lb{font-family:var(--sans);font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 6px;font-style:normal}
.np-vuoto{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);padding:8px 4px}
.np-apri.on{border-color:var(--ai);color:var(--ai)}
/* su schermi stretti la colonna passa sotto, non stringe il foglio */
@media (max-width:900px){
  .np-col{width:auto;max-height:230px}
}

/* ---- le forme che si aprono sotto alla parola (bozza A) ---- */
.np-cj{
  margin-left:auto;font-family:var(--serif);font-size:11px;line-height:1;
  color:var(--ai);border:1px solid var(--ai);border-radius:5px;padding:1px 4px;cursor:pointer;
}
.np-cj:hover,.np-cj.on{background:var(--ai);color:#fff}
.np-forme{
  margin:2px 0 7px 6px;border-left:2px solid var(--ai-soft);padding-left:8px;
}
.np-f-t{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.np-f-t i{font-style:normal;font-family:var(--sans);font-size:9px;font-weight:700;
  color:var(--ai);background:var(--ai-soft);border-radius:99px;padding:1px 6px;margin-left:4px}
.np-f-g{
  font-family:var(--sans);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin:6px 0 2px;
}
.np-f-r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:1px 0}
.np-f-r span{font-family:var(--sans);font-size:10px;color:var(--ink-soft);flex:none;max-width:72px}
.np-f-r b{font-family:var(--serif);font-size:12.5px;font-weight:600;text-align:right;
  overflow-wrap:anywhere}
.np-f-r b i{font-style:normal;color:var(--shu);font-weight:600}
.np-f-vuoto{font-family:var(--sans);font-size:11px;color:var(--ink-soft)}
/* il tempo fa da titoletto, positiva e negativa gli stanno sotto */
.np-f-tempo{
  font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink);
  margin:5px 0 1px;
}
.np-f-r.neg b{color:var(--shu)}