/* SM-666 -- the shared star-rating component's own stylesheet. Doctrine:
   feedback_star_rating_doctrine. Mask-painted from ONE Illustrator-exported
   asset (static/icons/star-rating.svg, stripped of its internal <style>/
   .st0 class per the Illustrator-SVG-collision rule) -- the same mask-image
   idiom day-settings.css already established for the site's +/- stepper
   icons. Never a text/unicode star.

   THE OUTLINE (empty star) is derived from that ONE asset with no second
   vector file: two mask layers of the identical SVG at different sizes,
   combined with mask-composite:exclude, leave only the ring between the two
   boundaries -- the "thin outline" the doctrine calls for, without hand-
   deriving a stroke-only copy of the icon.

   PREVIEW vs COMMITTED are two separate absolutely-positioned layers over
   the SAME outline (DOM order = paint order: outline, then committed, then
   preview -- no z-index needed). Both use --accent (not a second hue) per
   the doctrine's own reconciliation of the reel with this site's palette;
   the committed layer is never repainted by hover, so it never flickers --
   the preview layer simply sits on top of it, and fading it out on
   mouseleave reveals the untouched committed state beneath.

   --smsr-size is this component's OWN documented skinnable knob (the same
   pattern day-settings.css's --sm-stepper-digits already established) -- a
   host page overrides it, or overrides width/height on `.smsr-star`
   directly, rather than a private theme-token fork. */

.smsr-row {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
}

.smsr-star {
  position: relative;
  display: inline-block;
  width: var(--smsr-size, 20px);
  height: var(--smsr-size, 20px);
  cursor: pointer;
  touch-action: manipulation;
}

.smsr-readonly .smsr-star {
  cursor: default;
}

.smsr-layer {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.smsr-outline {
  -webkit-mask-image: url('/app/static/icons/star-rating.svg?v=2'), url('/app/static/icons/star-rating.svg?v=2');
  mask-image: url('/app/static/icons/star-rating.svg?v=2'), url('/app/static/icons/star-rating.svg?v=2');
  -webkit-mask-size: 100% 100%, 74% 74%;
  mask-size: 100% 100%, 74% 74%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background-color: var(--text-dim);
}

.smsr-fill {
  -webkit-mask-image: url('/app/static/icons/star-rating.svg?v=2');
  mask-image: url('/app/static/icons/star-rating.svg?v=2');
  background-color: var(--accent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.smsr-fill.smsr-on {
  opacity: 1;
}

/* ── Summary ring ──────────────────────────────────────────────────────── */
.smsr-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.smsr-ring-track {
  fill: none;
  stroke: var(--card-border);
}

.smsr-ring-value {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.smsr-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.smsr-ring-num {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-weight: normal;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.03em;
}

.smsr-ring-max {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5rem;
  color: var(--text-dim);
  margin-top: 1px;
}