/* The sleeve's contour (tickets/T104-ce-qui-vient.md): a faint ring round the
   cover, and over it the share of the record already heard, drawn clockwise
   from the middle of the top edge (T108). Three pixels clear of the sleeve, so the hover's
   own ring (stage.css, T27) still has its place between the two. */
.cover { overflow: visible; }
.cover__art { border-radius: inherit; }
.cover__ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  overflow: visible;
  pointer-events: none;
  color: var(--ink);
}
.cover__ring rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-opacity: 0.1;
}
/* 100 is the whole contour (pathLength): ring.js grows the dash from 0 to 100
   over the record, and shifts it so it starts at the top's middle. */
.cover__ring .cover__done { stroke-opacity: 0.6; stroke-dasharray: 0 100; }

/* What is left of the record, under the hand: tiny, in the sleeve's corner,
   on a veil of the page's own ground so it reads over any artwork. */
.cover__left {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 4px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
@media (hover: hover) { .cover:hover .cover__left:not(:empty) { opacity: 1; } }
/* No hover on a touch screen: the time stays in its corner. */
@media (hover: none) { .cover__left:not(:empty) { opacity: 1; } }
/* The immersive mode shrinks the sleeve to 0.6 (immersive.css): the time keeps its size. */
.is-immersive .now .cover__left { transform: scale(1.667); transform-origin: right bottom; }