/* ============================================================================
   Document fields (Phase F) — the styles for the shared field renderer.
   Loaded after `reportnationalid.css`, which carries the calendar, the input
   indicators and the match feedback reused here unchanged. Only what is new to
   this form lives in this file, so there is one place per visual concern.
   ============================================================================ */

/* ---- Contact channel: email or phone -------------------------------------- */
/* The owner's instruction was that the contact is the visitor's choice, "because
   most can't even use emails" — so the two options must read as equal weight, not
   as a default with an escape hatch. */
.channel-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.channel-toggle__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.channel-toggle__opt input {
  accent-color: var(--accent);
  margin: 0;
}

.channel-toggle__opt:hover {
  border-color: var(--accent);
}

.channel-toggle__opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--text);
  font-weight: 500;
}

/* ---- Result panels -------------------------------------------------------- */
.check-result {
  text-align: center;
}

.check-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  font-size: 1.6rem;
  line-height: 1;
}

.check-result__icon--found {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.check-result__icon--waiting {
  background: var(--primary-light);
  color: var(--primary);
}

.check-result__title {
  margin-bottom: var(--space-sm);
}

.check-result__body {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.check-result__meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
}