/* Clickable filament chips + the inventory-row reveal pulse. */

/* The chips now do something, so they read as interactive. */
.projectMaterialChip[data-fil-name]{ cursor:pointer; transition:border-color .15s ease, transform .12s ease, background .15s ease; }
.projectMaterialChip[data-fil-name]:hover{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  transform:translateY(-1px);
}
.projectMaterialChip[data-fil-name]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Themed pulse on the matched inventory row after a chip jumps to it. */
@keyframes filChipPulse{
  0%   { background-color:color-mix(in srgb, var(--accent) 40%, transparent); }
  25%  { background-color:color-mix(in srgb, var(--accent) 28%, transparent); }
  100% { background-color:transparent; }
}
#inventoryTableBody tr.filChipPulse > td{
  animation:filChipPulse 1.9s ease-out;
}
/* A crisp accent edge on the row while it pulses, so it stands out even on
   busy tables. First and last cells round the ends. */
#inventoryTableBody tr.filChipPulse > td{ box-shadow:inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
#inventoryTableBody tr.filChipPulse > td:first-child{ box-shadow:inset 1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
#inventoryTableBody tr.filChipPulse > td:last-child{ box-shadow:inset -1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }

@media (prefers-reduced-motion: reduce){
  #inventoryTableBody tr.filChipPulse > td{ animation:none; background-color:color-mix(in srgb, var(--accent) 22%, transparent); }
}