/* The /report form (P13.4). Loaded only by the report pages, after
   site.css, whose colour tokens it uses (light and dark). */

.report-form { max-width: 40rem; margin-top: 1.5rem; }

.report-form fieldset {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.report-form legend { padding: 0 0.35rem; font-weight: 700; }

.field { margin: 0 0 1.1rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 600; }

.report-form input[type="text"],
.report-form input[type="url"],
.report-form input[type="email"],
.report-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.report-form textarea { min-height: 9rem; resize: vertical; }
.report-form input:focus-visible,
.report-form textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.8rem;
  line-height: 1.45;
}
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); }

.hint { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }

/* The server sent the form back: the message and the fields to complete. */
.notice.error { border-inline-start-color: #9b2c1f; font-weight: 600; }
.report-form [aria-invalid="true"] { border-color: #9b2c1f; border-width: 2px; }