/* Quaderno dei kanji — componenti condivisi.
   Le fondamenta comuni a tutta l'app, in un posto solo:
   · la SCALA dei piani (z-index): ogni strato ha il suo nome, così niente
     può più finire per sbaglio sopra o sotto un altro;
   · le barre di scorrimento, sottili e dello stesso colore ovunque;
   · i componenti che ricorrono uguali in più pannelli (riga campo+pulsante,
     linguette, righe utente, codici) definiti UNA volta e ripresi per alias.
   L'ordine dei fogli conta: questo viene subito dopo 00-base, quindi i fogli
   di area possono ancora correggere un dettaglio, ma la base è unica. */

:root{
  /* ---- la scala dei piani, dal basso verso l'alto ----
     effetti < pannelli < selettori < dialoghi < popup < tooltip < menu a
     ventaglio < barre flottanti < toast < tutorial. I numeri lasciano aria
     fra uno strato e l'altro per eventuali mezzi-piani futuri. */
  --z-fx: 900;         /* effetti decorativi (katana) */
  --z-overlay: 1000;   /* i pannelloni a tutto schermo (.game-overlay) */
  --z-picker: 1100;    /* selettori sopra un pannello (tavolozza, ＋ inserisci) */
  --z-dialog: 1200;    /* dialoghi di conferma (domanda, salva lavagna) */
  --z-pop: 1300;       /* popup agganciati a un pulsante (.rc-pop, notepop) */
  --z-tip: 1350;       /* tooltip informativi (notetip) */
  --z-menu: 1400;      /* menu a ventaglio (.pk-menu, evidenziatori) */
  --z-float: 1500;     /* pulsanti flottanti (annulla, pennello) */
  --z-toast: 1600;     /* avvisi a tempo */
  --z-banner: 1900;    /* strisce di sistema (cookie) */
  /* Il giro guidato sta sopra a TUTTO — e «tutto» comprende i pochi pezzi
     che si sono presi numeri altissimi per stare sopra al dizionario (che è
     a 2147483000, perché si trascina in giro sopra a qualunque cosa).
     A 2000 la bolla della guida finiva DIETRO al dizionario: si vedeva il
     riflettore ma non si leggeva più niente — e non è un caso di scuola, è
     la guida del dizionario stessa, e ogni guida che parte toccando un
     pulsante che apre un pannello. */
  /* Il dizionario si trascina in giro sopra a qualunque pannello, e per farlo
     si e' preso un numero altissimo. Adesso ha un nome: quello che nasce DA
     lui (il fogliettino delle label) deve stare un gradino piu' su, se no si
     apre dietro al dizionario stesso e non lo vede nessuno. */
  --z-diz: 2147483000;
  --z-diz-pop: 2147483050;
  /* La finestra di casa (qkAvvisa/qkConferma/qkChiedi) sta sopra a tutto
     quello che può farla comparire — dizionario e schermata d'accesso
     compresi. A 1900 finiva DIETRO al login (2147482300): chi si registrava
     senza email vedeva il tasto «Crea l'account» non fare niente, perché la
     domanda «vuoi continuare senza email?» era lì, aperta, sotto la pagina.
     Sotto al giro guidato, però: la guida deve poter spiegare la finestra. */
  --z-finestra: 2147483100;
  --z-tutorial: 2147483200;
}

/* ---- Barre di scorrimento: sottili, discrete, uguali ovunque ----
   Il pollice prende il colore delle linee e si scurisce sotto il mouse;
   niente sfondo pieno, niente frecce. */
*{scrollbar-width:thin;scrollbar-color:#D8CFC5 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#D8CFC5;border-radius:99px;
  border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:#B8AC9E;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

/* ---- Prima riga dei pannelli: mai sotto la × ----
   La × di chiusura sta (sticky) nell'angolo in alto a destra: qualunque barra
   di comandi apra il pannello deve fermarsi prima, sennò ci finisce sotto. */
.lv-topbar,.cl-tabs{margin-right:44px}
.g-back{display:inline-block;max-width:calc(100% - 48px)}

/* ---- Riga «campo + pulsante»: entra un codice, un nome, un ID ----
   Stessa riga in Lavagne (codice, nuova lavagna), Classe (codice, nome,
   compagno): definita qui una volta sola. */
.lv-join,.lv-newrow,.cl-newrow{display:flex;gap:8px}
.lv-join input,.lv-newrow input,.cl-newrow input{
  flex:1;min-width:0;height:40px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:14px;background:#fff;
}
.lv-join input:focus,.lv-newrow input:focus,.cl-newrow input:focus{outline:none;border-color:var(--ai)}
.lv-newrow .btn,.cl-newrow .btn{flex:none}
/* i campi-codice scrivono maiuscolo, ma il suggerimento resta normale */
#lv-code,#cl-code{letter-spacing:.06em;text-transform:uppercase}
#lv-code::placeholder,#cl-code::placeholder{text-transform:none;letter-spacing:normal}

/* ---- Il codice da condividere (lavagna, classe): sempre uguale ---- */
.lv-code-chip,.cl-code{font-family:var(--sans);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.lv-code-chip b,.cl-code b{font-family:monospace;letter-spacing:.12em;color:var(--ai)}

/* ---- Righe utente (studenti, compagni, richieste): una sola griglia ---- */
.cl-st{display:grid;grid-template-columns:1.2fr 1fr auto;gap:8px;align-items:center;
  padding:7px 2px;border-bottom:1px solid var(--paper)}
.cl-st.attesa{background:#FBF3EF;border-radius:8px;padding-left:6px;padding-right:6px}
.cl-st-n{font-family:var(--sans);font-size:13.5px;color:var(--ink);font-weight:600}
.cl-st-c{font-size:12px;color:var(--ink-soft)}
.cl-st-a{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.cl-st-a .btn{padding:5px 10px;font-size:12px}

/* ---- 窓 la finestra di casa (al posto dei popup di sistema) ----
   Sta sopra a tutto tranne il tutorial: una domanda aperta va risposta anche
   se sotto c'è un pannello. */
.qkfin{
  position:fixed;inset:0;z-index:var(--z-finestra);
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,26,22,.45);padding:18px;
}
.qf-carta{
  position:relative;width:min(440px,100%);
  background:var(--paper,#FAF7F2);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:20px 20px 16px;
  font-family:var(--sans);
  animation:qf-in .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes qf-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.qf-t{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px}
.qf-m{
  font-size:13.5px;color:var(--ink);line-height:1.55;
  white-space:pre-wrap;overflow-wrap:break-word;
  max-height:min(46vh,340px);overflow:auto;
}
.qf-in{
  width:100%;margin-top:12px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink);
}
.qf-az{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.qf-b{
  border:none;border-radius:10px;padding:10px 18px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:700;
}
.qf-si{background:var(--ink);color:var(--paper)}
.qf-si:hover{filter:brightness(1.15)}
.qf-si.qf-rosso{background:var(--shu,#C0392B);color:#fff}
.qf-no{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.qf-no:hover{background:#fff;color:var(--ink)}
.qf-x{
  position:absolute;top:10px;right:12px;border:none;background:none;
  font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px;
}
.qf-x:hover{color:var(--ink)}
@media (max-width:560px){
  .qkfin{align-items:flex-end;padding:0}
  .qf-carta{width:100%;border-radius:18px 18px 0 0;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .qf-az .qf-b{flex:1;text-align:center}
  .qf-az{flex-wrap:wrap}
}

/* ============================================================
   L'ANGOLO MANGIATO DALLA BARRA DI SCORRIMENTO
   ------------------------------------------------------------
   Un riquadro arrotondato che scorre, appena compare la barra, perde i due
   angoli dal lato della barra: restano SQUADRATI. Non è un difetto nostro,
   è come il browser dipinge la striscia della barra — fuori dal ritaglio
   tondo. Misurato: nell'angolo in alto a destra ci finiva ancora il
   riquadro, in quello a sinistra no.

   Le vie tentate e scartate: margine sulla traccia (l'angolo resta
   squadrato) e `scrollbar-gutter` (non c'entra con la forma).
   Quella che funziona è ritagliare tutto — barra compresa — con la stessa
   forma del bordo:  clip-path: inset(0 round <raggio>).

   Qui sotto c'è la classe da appiccicare a un riquadro che scorre, con il
   raggio in una variabile (--rr, di regola 12px), e l'elenco dei riquadri
   dell'app che già ce l'avevano. Se ne aggiungi uno nuovo che scorre e ha
   gli angoli tondi, mettilo in questa lista o dagli .qk-tondo.
   ============================================================ */
.qk-tondo,
.qf-m,                       /* il testo lungo di una finestra */
.lbltree, .lbl-list,         /* alberi e liste delle label */
.wc-list,                    /* le parole da collegare */
.un-lista,                   /* il pannello di unione */
.notes-list,                 /* l'elenco degli appunti */
.trad-elenco, .trad-hl, .trad-ta, .mv-elenco,
.diz-res,                    /* i risultati del dizionario */
/* fuori dalla lista i contenitori grandi che ospitano popup: un ritaglio
   lì dentro taglierebbe le tendine che devono sporgere */
.duel-rev-list, .shi-lista, .kar-tavolo{
  clip-path: inset(0 round var(--rr, 12px));
}
/* i pannelloni e le caselle di testo hanno raggi loro */
.notes-sheet{ --rr:12px }
.trad-hl,.trad-ta{ --rr:11px }
.trad-elenco,.mv-elenco{ --rr:11px }
.notes-list{ --rr:10px }
.qf-m{ --rr:8px }