/* Chip-field — nuvola di chip posizionati che si espandono in card con
   ancoraggio variabile e repulsione dei vicini (chip-field.js).
   Componente riusabile: consuma SOLO variabili neutre --chip-* (mappale nei
   tokens del progetto; i fallback inline sono neutri).

   Contratto: <ul class="chip-field" data-chip-field>
                <li style="--mx: …; --my: …">
                  <button type="button" class="chip-field__chip">
                    <span class="chip-field__label">…</span>
                    <span class="chip-field__note">…</span>
                  </button>
                </li>
              </ul>
   Il JS scrive solo sui bottoni: --ax/--ay (frazioni di ancoraggio 0–1),
   --dx/--dy (offset di riposo + spinta, px), --chip-pill-w/--chip-pill-h
   (misura pillola a nota collassata) e --chip-card-w (larghezza card).
   Con le larghezze misurate la pillola è aderente all'etichetta (la nota
   nascosta non gonfia più il box) e la crescita in larghezza è una
   transizione vera; senza JS, width resta auto (fallback). */

.chip-field {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-field > li {
  position: absolute;
  left: var(--mx);
  top: var(--my);
}

.chip-field > li:hover,
.chip-field > li:focus-within,
.chip-field > li.is-open { z-index: 2; }

/* Pillola→card: la nota si rivela con la riga di griglia (0fr→1fr).
   La traslazione compone spinta (--dx/--dy) e ancoraggio: il termine
   ax·(pillW − 100%) vale 0 a riposo e scorre con la dimensione durante la
   crescita, così l'ingrandimento resta ancorato al punto scelto dal JS.
   La transition su translate interpola solo i cambi di --dx/--dy. */
.chip-field__chip {
  font: inherit;
  text-align: left;
  color: var(--chip-fg, #333);
  background: var(--chip-bg, rgb(255 255 255 / 60%));
  backdrop-filter: blur(var(--chip-blur, 12px));
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-backdrop-filter: blur(var(--chip-blur, 12px));
  border: 1px solid var(--chip-border, rgb(255 255 255 / 45%));

  /* Raggio pillola = metà dell'altezza misurata: durante la crescita il
     valore interpola verso quello della card restando sempre sotto il clamp
     del browser (min(raggio, lato/2)) — niente scatto di curvatura in coda. */
  border-radius: var(--chip-radius-pill, calc(var(--chip-pill-h, 999px) / 2));
  padding: var(--chip-pad-pill, 0.3rem 0.7rem);
  display: grid;
  grid-template-rows: auto 0fr;
  width: var(--chip-pill-w, auto);
  max-width: var(--chip-max-w-pill, 15rem);
  cursor: default;
  translate: calc(var(--dx, 0px) + var(--ax, 0) * (var(--chip-pill-w, 100%) - 100%))
    calc(var(--dy, 0px) + var(--ay, 0) * (var(--chip-pill-h, 100%) - 100%));
  transition:
    grid-template-rows var(--chip-duration, 0.4s) var(--chip-ease, ease),
    width var(--chip-duration, 0.4s) var(--chip-ease, ease),
    max-width var(--chip-duration, 0.4s) var(--chip-ease, ease),
    border-radius var(--chip-duration, 0.4s) var(--chip-ease, ease),
    padding var(--chip-duration, 0.4s) var(--chip-ease, ease),
    box-shadow var(--chip-duration, 0.4s) var(--chip-ease, ease),
    translate var(--chip-duration, 0.4s) var(--chip-ease, ease);
}

.chip-field__label { white-space: nowrap; }

.chip-field__label::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--chip-dot, currentcolor);
}

.chip-field__note {
  min-height: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Spaziatura tra etichetta e nota che si clampa insieme alla riga 0fr. */
.chip-field__note::before {
  content: "";
  display: block;
  height: 0.4rem;
}

/* Stato card: guidato dal JS (li.is-open) quando l'engine è attivo
   (chip-field--on), altrimenti fallback :hover/:focus in CSS puro. */
@media (width >= 861px) {
  .chip-field--on > li.is-open .chip-field__chip,
  .chip-field:not(.chip-field--on) > li:hover .chip-field__chip,
  .chip-field:not(.chip-field--on) .chip-field__chip:focus-visible {
    grid-template-rows: auto 1fr;
    width: var(--chip-card-w, auto);
    max-width: var(--chip-max-w-card, 22rem);
    border-radius: var(--chip-radius-card, 16px);
    padding: var(--chip-pad-card, 0.9rem 1.1rem);
    box-shadow: var(--chip-shadow, 0 12px 32px rgb(0 0 0 / 10%));
  }
}

/* Misurazione invisibile (chip-field.js): is-frozen sospende le transizioni,
   is-measuring forza lo stato card, is-collapsed la pillola a nota esclusa
   (larghezza naturale = etichetta). Mai visibili a schermo: il JS aggiunge e
   rimuove le classi nello stesso frame. Gli !important blindano la geometria
   misurata contro le cascate del progetto ospite (es. un fallback statico
   attivo durante l'init): la misura DEVE fotografare gli stati del
   componente, qualunque cosa stia facendo la pagina attorno. */
.chip-field__chip.is-frozen { transition: none !important; }

.chip-field__chip.is-measuring {
  grid-template-rows: auto 1fr !important;
  width: auto !important;
  max-width: var(--chip-max-w-card, 22rem) !important;
  padding: var(--chip-pad-card, 0.9rem 1.1rem) !important;
}

.chip-field__chip.is-collapsed {
  grid-template-rows: auto 0fr !important;
  width: auto !important;
  max-width: var(--chip-max-w-pill, 15rem) !important;
  padding: var(--chip-pad-pill, 0.3rem 0.7rem) !important;
}

.chip-field__chip.is-collapsed .chip-field__note { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .chip-field__chip { transition: none; }
}