/* In-game bug reports and feedback (js/ui/feedback.js). Builds on base.css and game.css. */

.feedback-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.feedback-form { display: flex; flex-direction: column; gap: 1rem; }
.feedback-form h2 { margin: 0; }
.feedback-form .hint { margin: 0; }
.feedback-form fieldset { border: 0; padding: 0; margin: 0; }
.feedback-form legend { margin-bottom: 0.4rem; }
.feedback-kinds label { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text); }
.feedback-kinds input { accent-color: var(--accent); }
.feedback-form textarea { min-height: 8rem; font-family: var(--font-sans); font-size: 0.9375rem; }
.feedback-count { align-self: flex-end; font-family: var(--font-mono); font-size: 0.6875rem; }
.feedback-context summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; }
.feedback-context summary:hover { color: var(--text-strong); }
.feedback-context[open] summary { margin-bottom: 0.5rem; }
.feedback-json {
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.75rem;
  max-height: 14rem; overflow: auto; margin: 0.5rem 0 0; color: var(--muted);
}
.feedback-form .dialog-actions { margin-top: 0; }

/* The quiet entry on the end-of-fragment cards and in the reading settings. */
.card .actions .btn-feedback, .settings-dialog .btn-feedback { font-size: 0.8125rem; color: var(--muted); }
.card .actions .btn-feedback:hover, .settings-dialog .btn-feedback:hover { color: var(--text-strong); }
.settings-dialog .dialog-actions .btn-feedback { margin-right: auto; }

@media (max-width: 40rem) {
  dialog.feedback-dialog { padding: 1.1rem; }
  .feedback-form .dialog-actions .btn { flex: 1 1 auto; }
}