/* osdot/module-reviews — the review cards, the stars, the star choice, the summary and the pages' layout, on the theme's
   tokens (--surface, --text, --text-muted, --accent, --border, --radius-card …; on the staff pages the admin shell's
   --ink and --muted) with plain fallbacks. The empty stars in the muted text colour (at least 3:1). The stars' colour
   never carries the rating alone (the figure, the label or "Rated 4 out of 5" is always there). Every target at least
   44 px; everything wraps, nothing scrolls sideways at 320 px with large text. */
.rev-page--wide { max-width: 72rem; }
.rev-stars { display: inline-flex; align-items: center; gap: .05em; white-space: nowrap; line-height: 1; }
.rev-stars__star { color: var(--text-muted, var(--muted, #5d5964)); font-size: 1.05em; }
.rev-stars__star.is-on { color: var(--rating, var(--accent, #9a4f31)); }
.rev-stars__figure { margin-inline-start: .4em; font-weight: 700; color: var(--text, var(--ink, #1a1820)); }
.rev-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0; font-size: var(--text-lg, 1.125rem); }
.rev-summary__count { color: var(--text-muted, var(--muted, #5d5964)); }
.rev-grid { display: grid; gap: var(--space-4, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.rev-card { display: grid; gap: var(--space-2, .5rem); align-content: start; height: 100%; box-sizing: border-box; padding: var(--space-5, 1.25rem);
  border: 1px solid var(--border, #d8d0c2); border-radius: var(--radius-card, 12px); background: var(--surface, #fffdf9); color: var(--text, var(--ink, #1a1820)); min-width: 0; }
.rev-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.rev-card__about { margin: 0; font-size: var(--text-md, 1rem); overflow-wrap: break-word; }
.rev-figures-demo { padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2, #ece5d8); color: var(--text, var(--ink, #1a1820)); font-size: var(--text-sm, .875rem); font-weight: 600; white-space: nowrap; }
.rev-card__demo { padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2, #ece5d8); color: var(--text, var(--ink, #1a1820)); font-size: var(--text-sm, .875rem); font-weight: 600; }
.rev-card__text { margin: 0; overflow-wrap: break-word; }
.rev-card__worker { margin: 0; color: var(--text-muted, var(--muted, #5d5964)); }
.rev-card__by { margin: 0; color: var(--text-muted, var(--muted, #5d5964)); font-size: var(--text-sm, .875rem); overflow-wrap: break-word; }
.rev-card__verified { font-weight: 600; color: var(--text, var(--ink, #1a1820)); }
.rev-card__by time { white-space: nowrap; } /* the day never breaks across lines */
.rev-card__reply { margin-top: var(--space-2, .5rem); padding: var(--space-3, .75rem); border-radius: calc(var(--radius-card, 12px) - 4px); background: var(--surface-2, #ece5d8); }
.rev-card__reply p { margin: 0; overflow-wrap: break-word; }
.rev-card__reply-head { font-weight: 700; margin-bottom: .25rem !important; }
.rev-section__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4, 1rem); margin-top: var(--space-6, 1.5rem); }
.rev-section__how { display: inline-flex; align-items: center; min-height: 2.75rem; }
.rev-pages { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); margin-top: var(--space-6, 1.5rem); }
.rev-optional { font-weight: 400; color: var(--text-muted, var(--muted, #5d5964)); }
.rev-item { padding-block: var(--space-4, 1rem); border-top: 1px solid var(--border, #d8d0c2); }
.rev-item h2 { margin: 0 0 var(--space-2, .5rem); font-size: var(--text-lg, 1.125rem); overflow-wrap: break-word; }
.rev-mine { display: grid; gap: var(--space-2, .5rem); align-content: start; }
.rev-mine__state { margin: 0; font-weight: 600; }
/* the star choice: five radio buttons, each a 2.75rem target; the stars up to the chosen one fill (with :has()) */
.rev-star-input { margin: 0 0 var(--space-4, 1rem); padding: 0; border: 0; min-width: 0; }
.rev-star-input legend { padding: 0; margin-bottom: var(--space-2, .5rem); font-weight: 600; }
.rev-star-input__options { display: flex; flex-wrap: wrap; gap: .25rem; }
.rev-star-input__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rev-star-input__star { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; cursor: pointer; font-size: 1.75rem; line-height: 1;
  color: var(--border-strong, #9b9183); background: var(--surface, #fffdf9); border: 1px solid var(--border, #d8d0c2); }
.rev-star-input__radio:focus-visible + .rev-star-input__star { outline: 3px solid var(--focus, var(--primary, #6e5020)); outline-offset: 2px; }
.rev-star-input__radio:checked + .rev-star-input__star { color: var(--rating, var(--accent, #9a4f31)); border-color: var(--rating, var(--accent, #9a4f31)); }
.rev-star-input__options:has(.rev-star-input__radio:checked) .rev-star-input__star { color: var(--rating, var(--accent, #9a4f31)); }
.rev-star-input__options:has(.rev-star-input__radio:checked) .rev-star-input__radio:checked + .rev-star-input__star ~ .rev-star-input__star { color: var(--border-strong, #9b9183); }
.rev-star-input.has-error .rev-star-input__star { border-color: var(--danger, #b3261e); }
.rev-form__note { margin: var(--space-2, .5rem) 0 var(--space-4, 1rem); }
.rev-admin { display: grid; gap: var(--space-4, 1rem); margin-block: var(--space-4, 1rem); }
.rev-admin__item { display: grid; gap: var(--space-3, .75rem); }
.rev-admin__about { margin: 0; font-size: var(--text-lg, 1.125rem); }
.rev-admin__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); align-items: flex-end; }
.rev-admin__hide { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); align-items: center; }
.rev-admin__reason { margin: 0; font-weight: 600; }
.rev-page .sr-only, .rev-section .sr-only, .rev-star-input .sr-only, .rev-mine .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rev-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: var(--text-sm, .875rem); }
.rev-inline__count { color: var(--text-muted, var(--muted, #5d5964)); }