/*
 * @mostly-tiny/reviews — widget styles (window.MostlyReviews).
 * Dependency-free, scoped under .mostlyreviews. Tokens are overridable via
 * CSS custom properties so each app can theme it from its design system.
 */
.mostlyreviews {
  --mr-accent: #f5a623;        /* star + CTA accent */
  --mr-fg: #1a1a1a;
  --mr-muted: #6b7280;
  --mr-border: #e5e7eb;
  --mr-bg: #ffffff;
  --mr-radius: 12px;
  color: var(--mr-fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 720px;
}
.mostlyreviews * { box-sizing: border-box; }

.mostlyreviews .mr-title { font-size: 1.25rem; font-weight: 650; margin: 0 0 0.75rem; }
.mostlyreviews .mr-loading { color: var(--mr-muted); padding: 1rem 0; }

/* Summary */
.mostlyreviews .mr-summary { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0 1rem; border-bottom: 1px solid var(--mr-border); margin-bottom: 1rem; }
.mostlyreviews .mr-avg { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.mostlyreviews .mr-summary__meta { display: flex; flex-direction: column; gap: 0.25rem; }
.mostlyreviews .mr-summary__count { color: var(--mr-muted); font-size: 0.9rem; }
.mostlyreviews .mr-empty { color: var(--mr-muted); padding: 0.5rem 0; }

/* Stars */
.mostlyreviews .mr-stars { display: inline-flex; gap: 2px; line-height: 1; }
.mostlyreviews .mr-star { color: var(--mr-border); font-size: 1.15rem; }
.mostlyreviews .mr-star--on { color: var(--mr-accent); }
.mostlyreviews .mr-stars--pick .mr-star { cursor: pointer; font-size: 1.6rem; transition: transform 0.08s ease; }
.mostlyreviews .mr-stars--pick .mr-star:hover { transform: scale(1.1); }
.mostlyreviews .mr-stars--pick .mr-star:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 2px; border-radius: 3px; }

/* Review list */
.mostlyreviews .mr-list { display: flex; flex-direction: column; gap: 1rem; }
.mostlyreviews .mr-review { border: 1px solid var(--mr-border); border-radius: var(--mr-radius); padding: 1rem; background: var(--mr-bg); }
.mostlyreviews .mr-review__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.mostlyreviews .mr-badge { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 1px 6px; border-radius: 999px; }
.mostlyreviews .mr-review__title { margin: 0.1rem 0 0.3rem; font-size: 1rem; font-weight: 620; }
.mostlyreviews .mr-review__body { margin: 0 0 0.5rem; white-space: pre-wrap; }
.mostlyreviews .mr-review__foot { display: flex; gap: 0.5rem; color: var(--mr-muted); font-size: 0.85rem; }
.mostlyreviews .mr-review__foot .mr-review__date::before { content: "·"; margin-right: 0.5rem; }

/* Form */
.mostlyreviews .mr-form { border: 1px solid var(--mr-border); border-radius: var(--mr-radius); padding: 1rem; margin-bottom: 1.25rem; background: var(--mr-bg); }
.mostlyreviews .mr-form__label { font-weight: 600; margin-bottom: 0.4rem; }
.mostlyreviews .mr-input { width: 100%; margin-top: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--mr-border); border-radius: 8px; font: inherit; color: inherit; }
.mostlyreviews .mr-input:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 1px; border-color: var(--mr-accent); }
.mostlyreviews .mr-textarea { resize: vertical; min-height: 80px; }
.mostlyreviews .mr-form__actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.mostlyreviews .mr-btn { background: var(--mr-accent); color: #1a1a1a; border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font: inherit; font-weight: 620; cursor: pointer; }
.mostlyreviews .mr-btn:hover { filter: brightness(0.96); }
.mostlyreviews .mr-btn:disabled { opacity: 0.6; cursor: default; }
.mostlyreviews .mr-form__status { font-size: 0.9rem; color: var(--mr-muted); }
.mostlyreviews .mr-form__status--ok { color: #047857; }
.mostlyreviews .mr-form__status--err { color: #b91c1c; }
.mostlyreviews .mr-signedout { color: var(--mr-muted); padding: 0.75rem 0; }

@media (prefers-color-scheme: dark) {
  .mostlyreviews {
    --mr-fg: #f3f4f6; --mr-muted: #9ca3af; --mr-border: #374151; --mr-bg: #1f2937;
  }
  .mostlyreviews .mr-badge { color: #6ee7b7; background: #064e3b; border-color: #065f46; }
}