/* Book-only, inline rating controls. Every color follows the active theme. */
.sg-book-rating-panel { margin-block-end: 24px; padding: 24px; scroll-margin-block-start: 24px; }
.sg-book-rating-panel [hidden], .sg-book-rating-summary [hidden] { display: none !important; }
.sg-book-rating-compact { display: inline-flex; min-block-size: 44px; align-items: center; margin-block-end: 16px; border-radius: 8px; }
.sg-book-rating-compact:focus-visible, .sg-book-rating-option:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.sg-book-rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgb(var(--color-ink)); }
.sg-book-rating-stars { position: relative; display: block; inline-size: 140px; block-size: 28px; flex: 0 0 140px; color: rgb(var(--color-primary)); }
.sg-book-rating-stars-base, .sg-book-rating-stars-fill { position: absolute; inset: 0; display: flex; inline-size: 140px; }
.sg-book-rating-stars-base { color: rgb(var(--color-ink-muted) / .55); }
.sg-book-rating-stars-fill { overflow: hidden; transition: width 240ms ease-out; }
.sg-book-rating-stars svg { inline-size: 28px; block-size: 28px; flex: 0 0 28px; stroke: currentColor; stroke-width: 1.5; fill: transparent; }
.sg-book-rating-stars-fill svg { fill: currentColor; stroke: currentColor; }
.sg-book-rating-average { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-book-rating-count { color: rgb(var(--color-ink-muted)); font-size: .875rem; }
.sg-book-rating-overview { display: flex; flex-direction: column; gap: 8px; }
.sg-book-rating-editor, .sg-book-rating-access { margin-block-start: 24px; }
.sg-book-rating-options { display: flex; inline-size: max-content; max-inline-size: 100%; margin-block-start: 8px; }
.sg-book-rating-option { position: relative; isolation: isolate; display: grid; place-items: center; inline-size: 48px; min-inline-size: 48px; block-size: 48px; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--color-ink-muted)); cursor: pointer; transition: color 240ms ease-out, background 240ms ease-out; touch-action: manipulation; }
.sg-book-rating-option::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--color-primary) / .24), rgb(var(--color-primary) / 0) 70%); opacity: 0; pointer-events: none; }
.sg-book-rating-option svg { inline-size: 36px; block-size: 36px; fill: transparent; stroke: currentColor; stroke-width: 1.5; pointer-events: none; transition: fill 240ms ease-out, transform 240ms ease-out; }
.sg-book-rating-option.is-filled { color: rgb(var(--color-primary)); }
.sg-book-rating-option.is-filled svg { fill: currentColor; }
.sg-book-rating-option.is-cascading:not(.is-selected) svg { animation: sg-book-rating-cascade 200ms ease-out var(--rating-delay, 0ms) both; }
.sg-book-rating-option.is-selected svg { animation: sg-book-rating-bounce 240ms ease-out var(--rating-delay, 0ms) both; }
.sg-book-rating-option.is-selected::before { animation: sg-book-rating-halo 240ms ease-out var(--rating-delay, 0ms) both; }
.sg-book-rating-option.is-denied::before { animation: sg-book-rating-halo 240ms ease-out; }
.sg-book-rating-option:disabled { cursor: default; }
.sg-book-rating-draft { min-block-size: 24px; margin-block-start: 8px; }
.sg-book-rating-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.sg-book-rating-save { min-inline-size: 160px; min-block-size: 48px; }
.sg-book-rating-spinner { inline-size: 16px; block-size: 16px; flex-shrink: 0; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sg-book-rating-spin 800ms linear infinite; }
.sg-book-rating-feedback { min-block-size: 24px; margin-block-start: 16px; font-size: .875rem; color: rgb(var(--color-ink-muted)); }
.sg-book-rating-access, .sg-book-rating-feedback { overflow-wrap: anywhere; }
.sg-book-rating-success { display: inline-flex; gap: 8px; align-items: center; color: rgb(var(--color-ink)); }
.sg-book-rating-success svg { inline-size: 24px; block-size: 24px; fill: transparent; stroke: rgb(var(--color-primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sg-book-rating-pop 240ms ease-out; }
.sg-book-rating-retry { margin-block-start: 8px; }
.sg-book-rating-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes sg-book-rating-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes sg-book-rating-cascade { 0%, 100% { transform: scale(1); } 45% { transform: translateY(-2px) scale(1.1); } }
@keyframes sg-book-rating-bounce { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: translateY(-3px) scale(1.18) rotate(-6deg); } 75% { transform: scale(1.04) rotate(3deg); } }
@keyframes sg-book-rating-halo { 0% { transform: scale(.65); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes sg-book-rating-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .sg-book-rating-option:not(:disabled):hover { background: rgb(var(--color-primary) / .08); } }
@media (min-width: 768px) { .sg-book-rating-overview { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } }
@media (max-width: 479px) { .sg-book-rating-panel { padding: 16px; } }
/* The book detail has two existing gutters: preserve five 48px targets at 320px. */
@media (max-width: 359px) { .sg-book-rating-panel { padding: 8px; } }
@media (prefers-reduced-motion: reduce) {
    .sg-book-rating-stars-fill, .sg-book-rating-option, .sg-book-rating-option svg { transition: none; }
    .sg-book-rating-option.is-selected svg, .sg-book-rating-option.is-cascading svg, .sg-book-rating-option.is-selected::before, .sg-book-rating-option.is-denied::before, .sg-book-rating-success svg, .sg-book-rating-spinner { animation: none; }
}