/* "Case in progress" sticker — js/progress-label.js (Figma: label-in-progress).
   Colours are set per cover; the defaults are the Figma component's greys. */
.pl {
  --pl-bg: #e3e3e3;
  --pl-curl: #f3f3f3;
  --pl-ink: #1a1a1a;
  --pl-ring-turn: -90deg; /* the ring of words stands still, turned so one «case in progress» runs upright along the bottom */
  --pl-spin-dur: 1.6s;   /* one lap of the bright spoke */
  /* the words' size in the sticker's own 184 px units, so a smaller sticker
     can take a bigger size (Roman, 26.10.2026). Figma's 17px sets like 14.25
     here: its Literaturnaya Italic is a different cut */
  --pl-font-size: 18.25px;
  --pl-tracking: .45px;
  --pl-rule-gap: .9;     /* rules stop this many em short of the words (Figma ≈ .9) */
  display: inline-block;
  width: var(--pl-size, 184px); /* set it from outside: a cover, the lab */
  aspect-ratio: 184 / 183;
  line-height: 0;
}
/* the layers' frame; :where() so a cover's own placement (absolute) wins */
:where(.pl) { position: relative; }
/* every layer fills the 184 × 183 frame: the sheet, what it cuts (spinner,
   ring), the peeled corner on top */
.pl-layer, .pl-inside, .pl-spinner, .pl-ring { position: absolute; inset: 0; }
.pl-inside { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.pl:lang(uk) { --pl-font-size: 18.75px; }
/* the cover sizes (Figma: desktop and tablet 144, mobile 110); .pl--cover
   takes whichever the breakpoint has */
.pl--144, .pl--cover { --pl-font-size: 21.75px; }
.pl--144:lang(uk), .pl--cover:lang(uk) { --pl-font-size: 20px; }
.pl--110, .pl--110:lang(uk) { --pl-font-size: 22px; }
@media (max-width: 767px) { .pl--cover, .pl--cover:lang(uk) { --pl-font-size: 22px; } }
.pl svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pl-sheet { fill: var(--pl-bg); }
.pl-curl { fill: var(--pl-curl); }

.pl-ring {
  transform-origin: 49.913% 50.186%; /* the ring's centre, 91.84 / 184 and 91.84 / 183 */
  transform: rotate(var(--pl-ring-turn));
}
.pl-text { font: italic 400 var(--pl-font-size) "Literaturnaya", serif; letter-spacing: var(--pl-tracking); fill: var(--pl-ink); }
.pl-rule { fill: none; stroke: var(--pl-ink); stroke-width: .5; }

/* the old-iOS run: the spokes stand still, brightest to faintest round the
   circle, and the whole spinner steps a twelfth of a lap at a time, so the
   bright spoke leads and the tail fades behind it. One layer that changes
   7.5 times a second: each spoke fading on its own, and the ring of words
   turning, kept the browser compositing the whole screen at 120 Hz and the
   Mac's fans came on (29.10.2026) */
.pl-spinner {
  transform-origin: 50% 50.273%; /* the spinner's centre, 92 / 184 and 92 / 183 */
  animation: pl-spin var(--pl-spin-dur) steps(12) infinite;
}
.pl-spoke {
  position: absolute;
  border-radius: 999px;
  background: var(--pl-ink);
  opacity: calc(.18 + .72 * var(--i) / 11);
}
.pl--off .pl-spinner { animation-play-state: paused; } /* off screen */
@keyframes pl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pl-spinner { animation-duration: calc(var(--pl-spin-dur) * 3); }
}