/* =============================================================================
   91-shelfd-star-glyph.css - the app's own star, as a text-sized glyph
   -----------------------------------------------------------------------------
   The rating star was the Unicode character U+2605. That is whatever star the
   device font happens to ship: a different shape on iOS, Android and desktop,
   none of them the Shelfd mark. This replaces it with the star from the app
   logo (assets/public/splash_star_icon.svg), so the glyph beside a rating is
   the same star on the icon, the splash screen and the end of onboarding.

   WHY A MASK AND NOT AN <img> OR INLINE SVG
   The star appears at ~50 call sites across a dozen files. Inline SVG would
   paste 700 bytes of path data into every one of those template literals; an
   <img> cannot take currentColor, so each surface would have to hardcode its
   own gold. A mask is defined ONCE here, costs one empty <span> at the call
   site, and paints in currentColor - so a surface that wants a different
   colour star changes `color` and nothing else.

   HOW TO USE IT
       <span class="shelfd-star-glyph" aria-hidden="true"></span>

   Size follows font-size, exactly as the character did, so any existing rule
   that sized the old star with `font-size` keeps working untouched. Override
   --shelfd-star-size for an explicit size.
   ========================================================================== */

:root {
  /* The logo path on a tight viewBox - no padding, so `height` IS the star's
     height and the width below is its true aspect ratio (546.5 / 515.14). */
  --shelfd-star-glyph-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='238.27 238.32 546.5 515.14'%3E%3Cpath d='M512.151 238.323C513.867 239.945 571.623 417.253 576.141 432.497L784.767 432.611C771.666 443.087 754.115 455.03 740.323 465.35C699.465 495.921 656.93 525.534 616.381 556.44C618.618 564.428 621.133 572.49 623.696 580.388C640.729 632.86 655.961 685.871 673.174 738.279C674.849 743.38 676.348 748.382 678.139 753.461C636.698 722.762 594.233 693.232 552.717 662.614C539.405 652.797 525.325 642.137 511.596 633.008L394.452 718.772C379.363 729.724 362.206 742.899 347.101 753.24C354.591 726.712 364.769 697.325 373.193 670.872C385.017 632.747 397.193 594.731 409.718 556.831C392.63 545.528 376.855 533.178 360.433 521.158L305.48 481.226C283.414 464.954 260.9 447.942 238.274 432.5C262.341 431.971 287.95 432.428 312.092 432.457L447.147 432.509C449.224 424.814 452.361 416.048 454.912 408.415C459.81 393.553 464.876 378.746 470.11 363.998C478.985 338.457 487.097 312.599 496.021 287.067C501.681 270.875 507.14 254.73 512.151 238.323Z'/%3E%3C/svg%3E");

  /* 0.72em is the height a U+2605 character occupied at a given font-size.
     Defaulting to it means adopting this glyph does not resize anything:
     every `font-size` rule that already tuned the old star still lands on the
     same optical size. Raise it to make the star bigger relative to its text. */
  --shelfd-star-size: 0.72em;

  /* Optical nudge, if a surface ever needs the star to sit off-centre. */
  --shelfd-star-nudge: 0px;
}

/* The paint is inside @supports on purpose. `background-color` with a mask
   that failed to apply is a SOLID GOLD RECTANGLE, which is a far worse
   failure than no star at all - so nothing is painted unless the engine has
   confirmed it can mask it into shape. Every browser in the supported iOS /
   Android range passes; this is insurance, not a real code path. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .shelfd-star-glyph {
    display: inline-block;
    flex: 0 0 auto;
    block-size: var(--shelfd-star-size);
    /* true aspect of the mark, so it is never stretched at any size */
    inline-size: calc(var(--shelfd-star-size) * 1.0609);
    background-color: currentColor;
    transform: translateY(var(--shelfd-star-nudge));

    -webkit-mask-image: var(--shelfd-star-glyph-src);
            mask-image: var(--shelfd-star-glyph-src);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    /* 100% 100% rather than `contain`: the viewBox is already the exact
       bounding box, so the box and the art agree and there is nothing to fit. */
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}