/* Quaderno dei kanji — scelte compatte (pulsantino + ventaglio di pastiglie) */

/* riga di scelte affiancate: se non ci stanno, l'ultima va a capo */
.pk-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pk-btn{
  /* base 92px: meglio andare a capo che strizzare le etichette */
  flex:1 1 92px;min-width:0;display:flex;align-items:baseline;gap:5px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:12px;line-height:1.2;
  padding:7px 9px;border-radius:9px;cursor:pointer;white-space:nowrap;
}
.pk-btn i{
  font-style:normal;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);flex:none;
}
.pk-btn .pk-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.pk-btn:hover{border-color:var(--ai)}
/* Nelle righe delle parole la cella è alta quanto la riga: il pulsante no, e
   sta a sinistra sotto la sua intestazione. Attenzione: la cella è un flex in
   colonna, quindi `align-self` agisce in ORIZZONTALE (era il disallineamento). */
.ex-row .pk-btn{flex:0 0 auto;align-self:flex-start;padding:6px 8px;font-size:10px}
/* con qualcosa di scelto il pulsante si accende (la parola ha una label, un livello…) */
.pk-btn.set{border-color:var(--ai);background:#F4F7FA}
.pk-btn.set .pk-val{font-weight:700}

/* il ventaglio: ancorato allo schermo, sopra a tutto */
.pk-menu{
  position:fixed;z-index:var(--z-menu);display:flex;flex-wrap:wrap;gap:5px;
  max-width:min(300px,92vw);max-height:46vh;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);padding:7px;
}
.pk-chip{
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-family:var(--sans);font-size:11.5px;line-height:1;
  padding:6px 10px;border-radius:999px;cursor:pointer;
}
.pk-chip:hover:not(:disabled){border-color:var(--lc,var(--shu));color:var(--ink)}
.pk-chip.on{
  border-color:var(--lc,var(--shu));color:var(--ink);font-weight:600;
  box-shadow:0 0 0 1px var(--lc,var(--shu)) inset;
  background:color-mix(in srgb, var(--lc,var(--shu)) 18%, #fff);
}
.pk-chip:disabled{opacity:.45;cursor:default;text-decoration:line-through}
/* voce con sottocategorie: la pastiglia e il suo ＋ attaccati */
.pk-fam{display:inline-flex;align-items:stretch}
.pk-fam .pk-chip{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.pk-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;
}
.pk-plus:hover{background:var(--paper);color:var(--ink)}
/* col pallino se dentro c'è qualcosa di scelto */
.pk-plus.on{color:var(--ai);font-weight:700}
.pk-plus.on::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ai);margin-left:4px;vertical-align:1px}
/* voce di servizio in fondo al ventaglio (es. "gestisci le label") */
.pk-more{
  flex:1 0 100%;border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;color:var(--ai);
  text-align:left;padding:4px 6px 2px;text-decoration:underline;
}

/* ---- Tavolozza dei colori in linea: standard per segnalibri, JLPT e label ---- */
.cpal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:2px 0}
.cpal-sw{
  width:22px;height:22px;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;
}
.cpal-sw:hover{transform:scale(1.12)}
.cpal-sw.on{box-shadow:0 0 0 2px var(--ink)}
.cpal-free{color:var(--ink-soft);background:#fff;overflow:hidden}
.cpal-free input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cpal-none{background:#fff;color:var(--ink-soft);font-size:13px;line-height:1}
/* la sezione di gestione colori che si apre dal link (ventaglio o popup) */
.cmgr-link{color:var(--ai)}
.pk-colmgr{
  flex:1 0 100%;display:flex;flex-direction:column;gap:9px;
  margin-top:6px;border-top:1px solid var(--line);padding-top:9px;
}
.cmgr-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cmgr-k{
  flex:none;min-width:38px;text-align:center;
  font-family:var(--serif);font-weight:700;font-size:12.5px;
  padding:3px 8px;border-radius:6px;
}

/* ---- Pastiglie dentro i popupini JLPT e Label (stile segnalibri) ---- */
.lblpop-chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px;padding:3px}
.lblpop-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;transition:.12s;
}
.lblpop-chip[style*="--lc"]::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--lc);flex:none;
}
.lblpop-chip:hover{border-color:var(--lc,var(--ai));color:var(--ink)}
.lblpop-chip.on{background:var(--lc,var(--ai));border-color:var(--lc,var(--ai));color:#fff}
.lblpop-chip.on[style*="--lc"]::before{background:#fff}
/* «gruppo attivo»: antenato della label assegnata. Non è la scelta vera (quella
   è .on, piena), ma segna che i minigiochi di questo gruppo la includono. */
.lblpop-chip.grp{border-color:var(--lc,var(--ai));color:var(--ink);
  background:var(--ai-soft);
  background:color-mix(in srgb, var(--lc,var(--ai)) 15%, transparent)}
/* sottocategoria: rientrata, con un trattino che la lega alla madre sopra */
.lblpop-chip.sub{margin-left:16px;position:relative}
.lblpop-chip.sub::after{
  content:"";position:absolute;left:-10px;top:50%;width:7px;height:1px;background:var(--line);
}

/* ---- modalità cancellazione: la label diventa rossa e si toglie con un tocco ---- */
.lblpop-chip.lblpop-del{border-color:var(--shu);color:var(--shu-deep);gap:8px}
.lblpop-chip.lblpop-del:hover{background:#F5E4E2;border-color:var(--shu)}
.lblpop-chip.lblpop-del::before{display:none}      /* niente pallino colore qui */
/* riga dei due modi (gestione colori · elimina), come nei segnalibri */
.lblpop-mgr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:2px 0}
.lbl-dellink.on{color:var(--shu-deep)}
.lbl-dellink:hover{color:var(--shu)}
/* ---- pastiglie inerti quando la gestione colori è aperta ---- */
.lblpop-chip.inert, .cat-chip.inert{cursor:default}
/* ---- popupino Label ad albero ---- */
.lbl-pop{width:min(300px,94vw)}
/* padding + gap più ariosi: in modalità colore il contorno di selezione
   (outline) sborda le pastiglie e, senza spazio, veniva tagliato dall'overflow */
.lbltree{display:flex;flex-direction:column;gap:7px;margin:8px 0 2px;max-height:44vh;overflow:auto;padding:4px}
.lbltree-node{display:flex;flex-direction:column;gap:4px}
/* ogni livello dell'albero rientra di un passo (--d = profondità), a piacere */
.lbltree-row{display:flex;align-items:center;gap:6px;padding-left:calc(var(--d,0)*15px);position:relative}
/* la pastiglia è larga quanto il testo, non tutta la riga; i comandi (＋/×) si
   allineano a destra in colonna, per poterli ritrovare a colpo d'occhio */
.lbltree-row .lblpop-chip{flex:0 1 auto;min-width:0;max-width:100%;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbltree-ctrls{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
/* trattino che lega la sotto-label al livello sopra, spostato col rientro */
.lbltree-c::before{content:"";position:absolute;left:calc(var(--d,0)*15px - 9px);top:50%;width:6px;height:1px;background:var(--line)}
.lbltree-add{
  flex:none;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.lbltree-add:hover{border-color:var(--ai);color:var(--ai)}
.lbltree-add.on{background:var(--ai);border-color:var(--ai);color:#fff}
.lbltree-del{
  flex:none;width:22px;height:22px;border-radius:6px;border:none;background:transparent;
  color:#C7C4BB;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.lbltree-del:hover{background:#F5E4E2;color:var(--shu-deep)}
.lbltree-pal{margin:2px 0 4px 2px}
/* riga di aggiunta: a sinistra l'indicatore di dove va la nuova label */
.lblpop-addrow{display:flex;align-items:stretch;gap:6px;margin:6px 0 2px}
.lblpop-addrow .cat-in{margin:0;flex:1;min-width:0}
.lbltarget{
  flex:none;min-width:30px;max-width:110px;padding:0 10px;
  border:1px dashed var(--line);border-radius:9px;background:var(--paper);
  color:var(--ink-soft);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lbltarget.on{border-style:solid;border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}
/* Stile/Dove (dentro la gestione colori) */
.lblpop-stile{display:flex;gap:8px;margin-top:8px}
.lblpop-stile label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;
  font-family:var(--title);font-weight:900;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
/* in colonna il flex-basis di .pk-btn (92px) diventa l'altezza: lo azzero,
   così l'altezza torna quella di riga e i due menù non sono più altissimi */
.lblpop-stile .pk-btn{flex:none;width:100%;height:32px}

/* ---- tavolozza sola: bersaglio selezionato + spaziatura ---- */
.cmgr-single{margin-top:8px}
.lblpop-chip.cptarget,.cat-chip.cptarget{outline:2px solid var(--ai);outline-offset:1px;border-color:var(--ai)}