/* The Report an issue page (report.html), on top of styles.css. */

.rep-sprite { position: absolute; }
.report { max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 24px 16px 8px; }
.rep-card { margin: 0 0 16px; padding: 20px; }
.rep-card > h2 { margin: 0 0 8px; }
.rep-muted { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }

/* known issues */
.rep-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rep-issues li { padding: 12px 16px; border-radius: var(--r); background: var(--md-sys-color-surface-container-high); }
.rep-issues h3 { margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 500; }
.rep-issues p { margin: 0 0 4px; font-size: 14px; line-height: 20px; }
.rep-issues p:last-child { margin-bottom: 0; }
.rep-status { color: var(--md-sys-color-primary); font-weight: 500; }

/* the form */
.rep-form { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.rep-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rep-field > label { font-size: 14px; line-height: 20px; font-weight: 500; }
.rep-req { color: var(--md-sys-color-error); }
.rep-opt { color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
.rep-field input, .rep-field select, .rep-field textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--r);
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: normal;
}
.rep-field textarea { resize: vertical; min-height: 96px; }
.rep-field select { appearance: auto; }
.rep-field input[type="file"] { min-height: 0; padding: 10px 12px; font-size: 14px; line-height: 20px; }
.rep-field input:hover, .rep-field select:hover, .rep-field textarea:hover { border-color: var(--md-sys-color-on-surface); }
.rep-field input:focus, .rep-field select:focus, .rep-field textarea:focus {
  outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.rep-field [aria-invalid="true"] { border-color: var(--md-sys-color-error); box-shadow: inset 0 0 0 1px var(--md-sys-color-error); }
.rep-help { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; line-height: 18px; }
.rep-error { margin: 0; color: var(--md-sys-color-error); font-size: 13px; line-height: 18px; font-weight: 500; }
.rep-error[hidden] { display: none; }

.rep-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rep-files[hidden] { display: none; }
.rep-files li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-radius: var(--r-s); background: var(--md-sys-color-surface-container-high); font-size: 14px; line-height: 20px; }
.rep-file-name { font-family: var(--md-ref-typeface-mono); overflow-wrap: anywhere; }

/* where the log files are */
.rep-logs { border-radius: var(--r); background: var(--md-sys-color-surface-container); }
.rep-logs > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer;
  list-style: none; font-size: 14px; line-height: 20px; font-weight: 500; border-radius: var(--r);
}
.rep-logs > summary::-webkit-details-marker { display: none; }
.rep-logs > summary .icon { width: 20px; height: 20px; color: var(--md-sys-color-primary); }
.rep-logs > summary .rep-chev { margin-left: auto; color: var(--md-sys-color-on-surface-variant); transition: transform var(--md-sys-motion-short) linear; }
.rep-logs[open] > summary .rep-chev { transform: rotate(180deg); }
.rep-logs-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.rep-logs-body .segmented { align-self: flex-start; }

/* the field people never see (spam check) */
.rep-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.rep-privacy { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; line-height: 18px; }
/* the spam check (Cloudflare Turnstile): its frame shows only when a click is needed */
.rep-spam:empty { display: none; }
#spam-check-status[hidden] { display: none; }
#spam-check-status.rep-spam-bad { color: var(--md-sys-color-error); font-weight: 500; }
.rep-actions { display: flex; justify-content: flex-end; }
#report-message:empty { display: none; }
#report-message .note { margin: 0; }
.note.ok { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.note.ok .icon { color: var(--md-sys-color-primary); }
.note.bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.note.bad .icon { color: inherit; }

@media (max-width: 600px) {
  .rep-grid { grid-template-columns: 1fr; }
  .rep-actions .btn { flex: 1 1 auto; justify-content: center; }
  .copy-field { padding-left: 12px; }
}