/* Signalements communautaires (E3.1–E3.4) — harmonisé Tracéo à l'É6.
   Le SOCLE des modales (`.modal`, `.modal-card`, `.modal-head`, `.modal-body`)
   vit désormais dans css/layout.css : il est partagé avec la modale de lieu
   (accueil). Ce fichier ne contient plus que le contenu de la modale de
   signalement (onglets, options, échelle d'affluence) et la bannière de
   signalements affichée sous le tableau de passages. Préfixe `rp-` pour les
   nouveaux éléments ; les classes historiques `.report-*` sont conservées telles
   quelles — elles sont ciblées par js/reports.js. */

/* ── Onglets (composant tr-seg) ─────────────────────────────── */
.rp-tabs { display: flex; width: 100%; }
.rp-tabs > button { flex: 1; min-width: 0; }

/* ── Panneaux ───────────────────────────────────────────────── */
.report-panels { padding-top: var(--sp-4); }
.report-panel { display: none; }
.report-panel.active { display: block; }
.rp-q {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-3);
}
.report-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.report-option {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ink); font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.report-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.report-option:active { transform: scale(.985); }

/* Échelle d'affluence : 4 niveaux → pastille de couleur (pas d'emoji), même
   sémantique de couleurs que les seuils de l'app (ok → warn → crit). */
.rp-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.rp-dot--low     { background: var(--ok);     color: var(--ok); }
.rp-dot--medium  { background: var(--note-c); color: var(--note-c); }
.rp-dot--high    { background: var(--warn);   color: var(--warn); }
.rp-dot--extreme { background: var(--crit);   color: var(--crit); }

.rp-foot {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  color: var(--ink-3); font-size: var(--fs-2xs); line-height: var(--lh-snug);
}
.rp-foot strong { color: var(--ink-2); font-weight: var(--fw-bold); }

/* ── Bannière des signalements (sous le tableau de passages) ── */
.reports-banner { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.reports-banner.hidden { display: none; }
.reports-banner:empty { display: none; }

/* Reprend le gabarit `tr-alert` : pastille d'icône + corps de texte. */
.report-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.report-alert__ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.report-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.report-alert strong { font-weight: var(--fw-bold); }

/* Confirmé par la communauté (≥ 2 signalements concordants) */
.report-alert.confirmed {
  background: var(--crit-wash); color: var(--ink);
  border-color: color-mix(in srgb, var(--crit) 32%, transparent);
}
.report-alert.confirmed .report-alert__ic { background: var(--crit); }

/* En attente : un seul signalement → on sollicite une confirmation */
.report-alert.pending {
  background: var(--warn-wash); color: var(--ink);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}
.report-alert.pending .report-alert__ic { background: var(--warn); }

.pending-actions { display: flex; gap: var(--sp-2); }
.pending-actions button {
  flex: 1; min-height: 44px;                       /* cible tactile */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ink-2); font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pending-actions button:hover { border-color: var(--border-strong); }
.pending-actions button:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .report-option, .pending-actions button { transition: none; }
}

/* ── Modale de lieu (S3 — domicile / travail / lieu nommé) ────
   Même socle de modale ; contenu propre à l'accueil (js/home.js). */
.place-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.place-field { position: relative; }
.place-field .ac-list { margin-top: 4px; max-height: 260px; overflow-y: auto; }
.place-picked {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--ok-wash); color: var(--ok);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.place-picked.hidden { display: none; }
.place-actions { display: flex; align-items: center; gap: var(--sp-2); }
.place-delete { margin-right: auto; color: var(--crit); }
.place-delete:hover { background: var(--crit-wash); }
.place-actions .tr-btn:not(.place-delete) { flex: 1; }