/* Keep rounded cards on their original pixel grid. The library is a scroll
   container, so translating its first row clips the card and its outer shadow. */
.libgrid{
  padding:6px;
  scroll-padding:6px;
}

.libgrid > .card,
.libgrid > .card:hover{
  transform:none;
  border-color:var(--edge);
  box-shadow:inset 0 1px 0 #ffffff06;
  transition:border-color var(--t-med),box-shadow var(--t-med);
}

.libgrid > .card .thumb{
  transition:filter var(--t-med);
}

.libgrid > .card .cardinfo{
  background-color:transparent;
  transition:background-color var(--t-med);
}

.libgrid > .card .cardbtns{
  transition:opacity var(--t-fast);
}

/* Pointer feedback stays inside the card instead of moving its border or
   painting a large shadow beyond the scrolling viewport. */
@media (hover:hover) and (pointer:fine){
  .libgrid > .card:hover{
    border-color:var(--blue);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 20%,transparent),
      inset 0 1px 0 #ffffff12;
  }
  .libgrid > .card:hover .thumb{filter:brightness(1.08)}
  .libgrid > .card:hover .cardinfo{background-color:#ffffff05}
}

.libgrid > .card:focus-within{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 20%,transparent);
}

.libgrid > .card:has(:focus-visible){
  outline:2px solid color-mix(in srgb,var(--blue) 78%,transparent);
  outline-offset:2px;
}

.libgrid > .card:focus-within .cardbtns{opacity:1}

/* The load target touches the clipped lower edge of the card. Keep its own
   keyboard outline inside that edge; the card also receives a complete ring. */
.libgrid > .card .cardinfo:focus-visible{outline-offset:-3px}

@media (prefers-reduced-motion:reduce){
  .libgrid > .card,
  .libgrid > .card .thumb,
  .libgrid > .card .cardinfo,
  .libgrid > .card .cardbtns{transition:none!important}
}