/*
 * Placement d'un point au pouce sur un téléphone (app/javascript/point_picker.js) :
 * carte plein écran, croix fixe au centre, adresse et « Valider ce point » en bas.
 * Commun au site public (lien posé par landings/_focus_flow) et à Pilotage
 * (importé par backend_tw/pilotage.css) : la fenêtre est ajoutée à <body>, hors de
 * `.tw` et de la coque agrandie, et prend les couleurs de la page qui l'ouvre
 * (variables `--lf-*` de Pilotage, sinon celles du site public). Échelle et formes du
 * chapitre mobile d'Alvéole (doc/design-system/mobile.md) : titre de feuille `heading`,
 * adresse `bodyStrong`, aide `small`, bouton `lg` de la barre d'action, rayon 10, cible de 44. Tout sous `.pp` :
 * le préflight de Tailwind (boutons, titres) et `.maplibregl-map` (position) passeraient devant.
 */

.pp {
  --pp-paper: var(--lf-surface, var(--paper, #fff));
  --pp-ink: var(--lf-text, var(--ink, #1C1B22));
  --pp-ink-2: var(--lf-text-2, var(--ink-2, #5E5D66));
  --pp-rule: var(--lf-border, var(--rule, #E6E5E0));
  --pp-action: var(--lf-action, var(--ink, #1C1B22));
  --pp-action-fg: var(--lf-action-fg, var(--ink-inverse, #fff));
  --pp-mark: var(--lf-action, var(--ink, #1C1B22));
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: var(--pp-paper); color: var(--pp-ink);
  font-family: var(--lf-font-sans, inherit);
}
.pp-locked, .pp-locked body { overflow: hidden; }

.pp .pp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px 20px;
  border-bottom: 1px solid var(--pp-rule);
}
.pp .pp-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--pp-ink); }
.pp button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp .pp-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--pp-ink);
}

.pp .pp-stage { position: relative; flex: 1; min-height: 0; }
.pp .pp-canvas { position: absolute; inset: 0; }
/* la croix ne capte aucun toucher : on déplace la carte à travers elle */
.pp .pp-reticle { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -50%); pointer-events: none; }
.pp .pp-reticle span {
  display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box;
  border: 2.5px solid var(--pp-mark); border-radius: 50%; color: var(--pp-mark);
  background: color-mix(in srgb, var(--pp-paper) 25%, transparent);
}
.pp .pp-reticle svg { width: 22px; height: 22px; stroke-width: 2.5; }
.pp .pp-locate {
  position: absolute; right: 16px; bottom: 40px; z-index: 500;
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid var(--pp-rule); border-radius: 50%; background: var(--pp-paper); color: var(--pp-mark);
  box-shadow: 0 4px 14px rgba(20, 19, 39, .08);
}
.pp .pp-locate[hidden] { display: none; }
.pp .pp-locate.is-busy svg { animation: pp-spin 1s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp .pp-foot {
  display: grid; gap: 8px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pp-rule); background: var(--pp-paper);
}
/* deux lignes réservées : le pied ne saute pas quand l'adresse arrive */
.pp .pp-address {
  margin: 0; min-height: 44px; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--pp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pp .pp-address.is-looking { color: var(--pp-ink-2); }
.pp .pp-hint { margin: 0; font-size: 14px; line-height: 19px; color: var(--pp-ink-2); }
.pp .pp-confirm {
  min-height: 52px; margin-top: 4px; border: 0; border-radius: var(--pp-radius, 10px);
  background: var(--pp-action); color: var(--pp-action-fg); font-size: 15px; font-weight: 500; line-height: 20px;
}
.pp .pp-confirm:disabled { opacity: .45; cursor: default; }
.pp .leaflet-control-attribution, .pp .maplibregl-ctrl-attrib { font-size: 10px; }