/* assets/css/redemption-grader.css — Redemption Grader form, verdict, band bar. */

.rg-form { display: flex; flex-direction: column; gap: 16px; background: var(--mm-bg-alt, #FAF6EF); border-radius: 14px; padding: 20px; }
.rg-form__row { display: flex; flex-wrap: wrap; gap: 14px; }
.rg-form__field { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 var(--mm-font-body, sans-serif); color: var(--mm-fg-muted, #4b5563); flex: 1 1 160px; min-width: 0; }
.rg-form__field--wide { flex-basis: 100%; }
.rg-form__field select, .rg-form__field input {
  font: 400 16px/1.4 var(--mm-font-body, sans-serif);
  padding: 10px 12px; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 8px;
  background: #fff; color: var(--mm-fg, #1F2937); width: 100%; box-sizing: border-box;
}
.rg-verdict { margin-top: 8px; }
.rg-verdict__hint { color: var(--mm-fg-muted, #4b5563); font: 400 14px/1.5 var(--mm-font-body, sans-serif); }
.rg-verdict__formula { font: 500 14px/1.6 var(--mm-font-mono, monospace); color: var(--mm-fg-muted, #4b5563); }
.rg-verdict__grade { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; }
.rg-verdict__letter { font: 700 48px/1 var(--mm-font-display, serif); color: var(--mm-accent, #FF6810); }
.rg-verdict__word { font: 600 18px/1.2 var(--mm-font-body, sans-serif); color: var(--mm-fg, #1F2937); }
.rg-verdict__baseline { font: 400 14px/1.5 var(--mm-font-body, sans-serif); color: var(--mm-fg-muted, #4b5563); }
.rg-verdict__warn { font: 500 13px/1.5 var(--mm-font-body, sans-serif); color: #A53A1A; background: #FFF1EC; border-left: 3px solid #A53A1A; padding: 8px 12px; border-radius: 0 6px 6px 0; margin-top: 8px; }
.rg-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Band bar (reused on the share-card preview). */
.rg-bandbar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(to right, #A53A1A 0%, #985A0E 35%, #1C5BA0 70%, #1C5BA0 100%); margin: 10px 0; }
.rg-bandbar__marker { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--mm-fg, #1F2937); border-radius: 2px; transform: translateX(-50%); }

@media (max-width: 600px) {
  .rg-form__row { flex-direction: column; }
  .rg-verdict__letter { font-size: 40px; }
}