/*
 * Scelta di una persona: si scrive un carattere, compare l'elenco.
 *
 * Sta in un file suo perché lo stesso campo lo disegna il sito pubblico e
 * lo disegna la dashboard — prima esisteva solo qui dentro ad admin.css, e
 * il sito ripiegava su un menu a tendina con dentro tutto il laboratorio.
 * Due copie del foglio di stile sarebbero divergenti al primo ritocco.
 */
.pickr{position:relative}

/* Chi è già stato scelto. Una tessera per persona, con la sua croce: in
   un elenco a selezione multipla togliere è frequente quanto aggiungere. */
.pickr__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 7px}
.pickr__chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 5px 4px 9px;border-radius:var(--r);
  background:var(--badge-bg);color:var(--badge-fg);
  font:500 12.5px 'Exo 2',sans-serif;
}
.pickr__chipx{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;border:0;border-radius:var(--r);
  background:rgba(0,0,0,.07);color:inherit;
  font:400 14px/1 'Exo 2',sans-serif;cursor:pointer;
}
.pickr__chipx:hover{background:rgba(0,0,0,.14)}

.pickr__list{
  position:absolute;z-index:10;left:0;right:0;top:calc(100% + 3px);
  margin:0;padding:4px;list-style:none;
  background:#fff;border:1px solid var(--line-thin);border-radius:var(--r);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  max-height:260px;overflow:auto;
}
.pickr__list li{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:7px 9px;border-radius:var(--r);cursor:pointer;
}
.pickr__list li:hover,.pickr__list li.is-active{background:var(--badge-bg)}
.pickr__n{font:600 13px 'Exo 2',sans-serif;color:var(--ink-800)}
.pickr__e{grid-column:1;font:400 11px 'Exo 2',sans-serif;color:var(--dim)}
.pickr__r{
  grid-row:1/3;align-self:center;
  font:500 9.5px 'Exo 2',sans-serif;letter-spacing:.05em;
  padding:3px 7px;border-radius:var(--r);
  background:rgba(0,0,0,.06);color:var(--dim-soft);white-space:nowrap;
}
.pickr__none{
  padding:9px;font:400 12.5px 'Exo 2',sans-serif;color:var(--dim-soft);
  cursor:default;
}
.pickr__none:hover{background:none}

/* La nota sotto il campo: dice cosa manca, e solo quando manca. */
.pickr__note{
  margin:7px 0 0;padding:7px 10px;border-radius:var(--r);
  background:oklch(0.95 0.03 30);color:#8d3420;
  font:500 12.5px 'Exo 2',sans-serif;
}