/* ==========================================================
   Citizen Report Submission page
   ========================================================== */

.report-page {
  background: linear-gradient(180deg, var(--primary-100) 0%, var(--gray-100) 320px);
  min-height: 100vh;
}

.report-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.report-card {
  width: 100%;
  max-width: 720px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 48px);
  animation: fadeInUp var(--dur-slow) var(--ease-out);
}

.report-card .form-control,
.report-card .form-select {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.report-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary-900);
  text-decoration: none;
  margin-bottom: 24px;
}
.report-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-700);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.report-card h1 {
  font-size: 28px;
  margin-bottom: 8px;
}
.report-card .subtitle {
  color: var(--gray-600);
  margin-bottom: 24px;
}

.req { color: var(--risk-high); }

.form-label { font-weight: 500; font-size: 14px; color: var(--gray-900); }
.form-hint { font-size: 12px; color: var(--gray-600); margin-top: 4px; }

.field-error {
  color: var(--risk-high);
  font-size: 13px;
  margin-top: 4px;
  display: none;
}
.field-error.show {
  display: block;
  animation: fieldErrorIn var(--dur-fast) var(--ease-out);
}
.is-invalid ~ .field-error,
.form-control.is-invalid,
.form-select.is-invalid {
  display: block;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 4px;
}

.btn-outline-brand {
  border: 1.5px solid var(--primary-700);
  color: var(--primary-700);
  background: transparent;
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.btn-outline-brand:hover { background: var(--primary-100); color: var(--primary-900); }

.geo-status {
  font-size: 13px;
  margin-left: 10px;
  color: var(--gray-600);
}
.geo-status.ok { color: var(--risk-low); }
.geo-status.error { color: var(--risk-high); }

.photo-preview {
  margin-top: 10px;
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  object-fit: cover;
}
.photo-preview:not(.d-none) { animation: fadeInScale var(--dur-med) var(--ease-out); }

.geo-status { transition: color var(--dur-fast) var(--ease-out); }

#formAlert.alert:not(.d-none) { animation: fadeInUp var(--dur-fast) var(--ease-out); }

.btn-brand[disabled] { opacity: 0.75; cursor: not-allowed; }
.btn-spinner { display: inline-flex; align-items: center; }

.back-link { margin-top: 20px; font-size: 14px; }
.back-link a { text-decoration: none; }

/* Honeypot field — present in the DOM (so bots see & fill it) but invisible/unreachable to humans */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

#formAlert.alert { font-size: 14px; }