/* Star rating display - score, five stars with fractional fill, count and
   source, optional breakdown bars. Stars and bars are aria-hidden; the
   screen-reader sentence and per-row text carry the same figures. */
:root { --sr-star: #c27c00; --sr-star-off: #dedbe8; }
html[data-theme="dark"] { --sr-star: #fbbf24; --sr-star-off: #2f395e; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --sr-star: #fbbf24; --sr-star-off: #2f395e; } }
.sr-s-accent { --sr-star: var(--e-accent); }
html[data-theme="dark"] .sr-s-accent { --sr-star: var(--e-accent-fg); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .sr-s-accent { --sr-star: var(--e-accent-fg); } }

.sr-wrap { display: grid; gap: 12px; }
.sr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-score { margin: 0; display: flex; align-items: baseline; gap: 2px; padding: 10px 14px; border-radius: calc(var(--e-radius-sm) + 4px); background: var(--e-hero); }
.sr-score strong { font-size: 2.5em; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--e-ink); font-variant-numeric: tabular-nums; }
.sr-score span { font-size: .95em; font-weight: 650; color: var(--e-ink-3); }
.sr-meta { display: grid; gap: 4px; min-width: 0; }
.sr-label { margin: 0; font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-2); }
.sr-stars { display: inline-flex; gap: 3px; }
.sr-star { position: relative; display: inline-block; width: 24px; height: 24px; }
.sr-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-bg { fill: var(--sr-star-off); }
.sr-fg { fill: var(--sr-star); }
.sr-count { margin: 0; font-size: .9em; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.sr-count span:first-child { font-weight: 650; color: var(--e-ink); }
.sr-count a { color: var(--e-accent-fg); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

.sr-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-dist li { display: grid; grid-template-columns: 34px 1fr 42px; align-items: center; gap: 10px; font-size: .86em; }
.sr-lvl { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.sr-mini { width: 13px; height: 13px; fill: var(--sr-star); }
.sr-track { display: block; height: 9px; border-radius: 999px; background: var(--e-surface-2); overflow: hidden; }
.sr-fill { display: block; height: 100%; border-radius: 999px; background: var(--sr-star); }
.sr-pct { text-align: right; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }
.sr-foot { margin: 0; font-size: .74em; color: var(--e-ink-3); }

/* badge: one compact pill row */
.sr-s-badge .sr-head { gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--e-line); border-radius: 999px; background: var(--e-surface); justify-self: start; flex-wrap: nowrap; }
.sr-s-badge .sr-score { padding: 6px 12px; border-radius: 999px; }
.sr-s-badge .sr-score strong { font-size: 1.4em; }
.sr-s-badge .sr-score span { display: none; }
.sr-s-badge .sr-meta { gap: 0; }
.sr-s-badge .sr-label { display: none; }
.sr-s-badge .sr-star { width: 16px; height: 16px; }
.sr-s-badge .sr-count { font-size: .8em; }

@media (max-width: 360px) {
    .sr-head { gap: 10px; }
    .sr-score strong { font-size: 2.1em; }
    .sr-star { width: 20px; height: 20px; }
    .sr-dist li { grid-template-columns: 30px 1fr 38px; gap: 8px; }
    .sr-s-badge .sr-head { flex-wrap: wrap; border-radius: var(--e-radius-sm); }
}