/* rank.css — drag states, the ranked counter, and view-transition timing. Loads after style.css.
   Only transform and opacity are animated here; the lift and the drop gap are painted, not tweened. */

/* ---------- Drag states (SortableJS) ---------- */
/* The gap left behind: the card keeps its box so the row does not reflow, and shows where the drop lands. */
.mouse-card.rank-ghost{
  background:color-mix(in srgb,var(--rail,var(--line-strong)) 12%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rail,var(--line-strong)) 42%,transparent);
}
.mouse-card.rank-ghost>*{visibility:hidden}

/* The card under the pointer. */
.mouse-card.rank-chosen{cursor:grabbing}
.mouse-card.rank-chosen:active{transform:none}
.mouse-card.rank-drag{opacity:1}

/* The lifted copy Sortable floats on the body in fallback (touch) mode. Sortable owns its transform. */
.mouse-card.rank-fallback{
  opacity:1!important;
  transition:none!important;
  animation:none!important;
  padding:var(--drag-padding,8px 8px 9px);
  background:var(--surface);
  border-radius:8px;
  box-shadow:0 10px 26px rgba(20,22,26,.24),0 0 0 1px var(--line-strong);
  cursor:grabbing;
  pointer-events:none;
}
.mouse-card.rank-fallback .photo{height:var(--drag-photo-height,62px)}
.mouse-card.rank-fallback>*{visibility:visible}
.mouse-card.rank-fallback[data-drag-origin=board] .card-meta{display:none}
:root[data-theme=dark] .mouse-card.rank-fallback{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px var(--line-strong)}
body.is-dragging{cursor:grabbing}
body.is-dragging .tier-placeholder{opacity:.45}
/* A finger covers the card it is holding, so on touch the lift and the gap have to read from the edges:
   an accent ring and a deeper shadow on the card in the air, a filled gap where it came from. */
@media (pointer:coarse){
  .mouse-card.rank-fallback{
    opacity:1;
    box-shadow:0 16px 36px rgba(20,22,26,.34),0 0 0 2px var(--accent);
  }
  :root[data-theme=dark] .mouse-card.rank-fallback{box-shadow:0 16px 36px rgba(0,0,0,.6),0 0 0 2px var(--accent)}
  .mouse-card.rank-ghost{
    background:color-mix(in srgb,var(--rail,var(--accent)) 22%,transparent);
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rail,var(--accent)) 68%,transparent);
  }
  /* Sortable owns the transform on both elements, so the held card is marked with colour, not with scale. */
  .mouse-card.rank-chosen{box-shadow:0 0 0 2px var(--accent)}
  /* The editions pill is a hover affordance; a finger reaches the same picker from the Editions chip. */
  .editions-open{display:none!important}
}

/* ---------- View transitions (page swaps only) ---------- */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.2s;
  animation-timing-function:var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  /* Pseudo-elements in the view-transition tree are not covered by the global rule in style.css. */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mouse-card.rank-fallback{box-shadow:0 0 0 1px var(--line-strong)}
}