/* gooi.io — Report page styles */
/* Uses design tokens from style.css */

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
}

.report-card h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.report-subtitle {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--accent);
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

select.form-input {
  appearance: none;
  cursor: pointer;
}

select.form-input option {
  background: var(--surface);
  color: var(--text);
}

.form-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
  line-height: 1.4;
}

.form-optional {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.5;
  margin-left: 0.25rem;
}

.report-message,
.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xs);
  font-size: 0.88rem;
  margin-top: 1rem;
  display: none;
}

.report-message.success,
.message.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.report-message.error,
.message.error {
  display: block;
  background: var(--error-glow);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: var(--error);
}