/* BookCarouselPage.swift: 210pt × 6pt bar, 5pt caption gap, 12pt stats;
   LibraryView.swift: 54pt cover play face with a 9.72pt inset;
   StarRatingView.swift: 18pt stars spaced 4.5pt apart. */
.phone-book-meta { margin-top: 1.333333cqw; }
.phone-book-meta:empty { display: none; }
.phone-progress, .phone-reading-stats, .phone-rating, .cover-play { display: none; }
.hero[data-phone-progress="true"] .phone-progress { display: block; }
.hero[data-phone-stats="true"] .phone-reading-stats { display: grid; }
.hero[data-phone-ratings="true"] .phone-rating { display: flex; }
.phone-progress {
  width: 46.666667cqw; height: 1.333333cqw; margin-inline: auto;
  border-radius: 999px; background: rgb(255 255 255 / .18); overflow: hidden;
}
.phone-progress > span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.phone-reading-stats {
  margin-top: 1.111111cqw; font-size: 2.666667cqw; line-height: 1.3;
  font-variant-numeric: tabular-nums; color: #aaa;
}
.phone-reading-stats > span { grid-area: 1 / 1; white-space: nowrap; }
.phone-rating { justify-content: center; gap: 1cqw; }
.phone-rating-star { position: relative; display: block; width: 4cqw; height: 4cqw; }
.phone-rating-star > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.hero .phone-rating svg { display: block; width: 4cqw; height: 4cqw; fill: rgb(255 255 255 / .18); stroke: none; }
.hero .phone-rating-star > span svg { fill: #ffd60a; }
.hero[data-phone-play="true"] .shelf-cover-flow .cover-play,
.hero[data-phone-play="true"][data-hero-variant="alternating"] .flow-cover[data-in-phone="true"] .cover-play { display: grid; }
.cover-play {
  position: absolute; left: calc(var(--phone-width) * .0216); bottom: calc(var(--phone-width) * .0216);
  width: calc(var(--phone-width) * .12); height: calc(var(--phone-width) * .12);
  z-index: 6; place-items: center; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .3);
  background: linear-gradient(135deg, rgb(255 255 255 / .24), rgb(255 255 255 / .06) 55%, rgb(255 255 255 / .14));
  -webkit-backdrop-filter: blur(9px) saturate(1.3); backdrop-filter: blur(9px) saturate(1.3);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .35), 0 2px 5px rgb(0 0 0 / .2);
  pointer-events: none;
}
.hero .cover-play svg { width: 42%; height: 42%; fill: var(--play-ink, #fff); stroke: none; transform: translateX(-1px); }
/* Use the native 22pt title gap when showing the additional caption row. */
.hero:is([data-phone-progress="true"], [data-phone-stats="true"], [data-phone-ratings="true"]) .flow-caption {
  top: calc(100% + var(--phone-width) * .0488889);
}
.hero:is([data-phone-progress="true"], [data-phone-stats="true"], [data-phone-ratings="true"]) .shelf-caption {
  top: calc(var(--phone-width) * 1.4137778);
}