/*
 * LIVEROK — éditeur de tracé.
 *
 * La carte occupe la majeure partie de l'écran, y compris sur téléphone : on dessine avec le doigt, et un formulaire
 * qui pousse la carte à 200 px de haut rend le geste impossible. Le formulaire vit donc SOUS la carte, atteignable
 * en faisant défiler, et la lecture distance/points reste collée entre les deux — c'est le seul chiffre qu'on
 * surveille pendant qu'on trace.
 */

.lr-draw {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(15, 23, 42, .55);
  display: grid;
  place-items: center;
  padding: 16px;
}

.lr-draw[hidden] { display: none !important; }

.lr-draw-inner {
  width: min(960px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fffaf5;
  border-radius: 20px;
  box-shadow: 0 26px 70px rgba(23, 51, 45, .32);
  display: flex;
  flex-direction: column;
}

.lr-draw-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
}

.lr-draw-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.lr-draw-help { margin: 0; font-size: .85rem; line-height: 1.45; opacity: .85; }

.lr-draw-close {
  margin-left: auto;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .15);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lr-draw-map {
  height: min(52dvh, 460px);
  min-height: 300px;
  margin: 0 20px;
  border-radius: 16px;
  overflow: hidden;
  background: #e8eef3;
}

/* Même protection que sur les autres cartes : la règle globale nue `svg{width:18px;height:18px}` du thème écrase
   sinon les tracés et les points de Leaflet, qui sont rendus en SVG. Piège déjà tombé sur la carte d'Explorer. */
.lr-draw-map .leaflet-container svg,
.lr-draw-map svg { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; }

.lr-draw-readout {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 20px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(226, 102, 31, .10);
  border: 1px solid rgba(226, 102, 31, .28);
  font-size: .88rem;
}

.lr-draw-readout b { font-size: 1.15rem; }
.lr-draw-readout button { margin-left: auto; min-height: 44px; }
.lr-draw-readout button + button { margin-left: 0; }

.lr-draw-form { padding: 14px 20px 22px; display: grid; gap: 12px; }
.lr-draw-form label { display: block; font-size: .86rem; font-weight: 600; }
.lr-draw-form input:not([type=radio]),
.lr-draw-form select,
.lr-draw-form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .18);
  font-size: 1rem;
  background: #fff;
}
.lr-draw-form textarea { min-height: 72px; resize: vertical; }

.lr-draw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lr-draw-duration { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.lr-draw-duration input { width: 5em; }

.lr-draw-dest { border: 1px solid rgba(15, 23, 42, .16); border-radius: 14px; padding: 12px 14px; margin: 0; }
.lr-draw-dest legend { font-size: .82rem; font-weight: 700; padding: 0 6px; }
.lr-draw-dest label { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-weight: 500; }
.lr-draw-dest input { margin-top: 4px; width: auto; min-height: 0; }
.lr-draw-dest b { display: block; font-size: .92rem; }
.lr-draw-dest small { display: block; font-size: .8rem; opacity: .82; line-height: 1.4; }

.lr-draw-note { margin: 0; font-size: .8rem; opacity: .8; line-height: 1.45; }
.lr-draw-feedback:empty { display: none; }
.lr-draw-feedback { margin: 0; font-weight: 600; font-size: .86rem; }

.lr-draw-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lr-draw-actions button { flex: 1 1 11em; min-height: 44px; }

@media (max-width: 640px) {
  .lr-draw { padding: 0; }
  .lr-draw-inner { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .lr-draw-map { margin: 0 12px; height: min(46dvh, 380px); }
  .lr-draw-readout { margin: 8px 12px 0; }
  .lr-draw-form { padding: 12px 12px 28px; }
  .lr-draw-row { grid-template-columns: 1fr; }
  .lr-draw-head { padding: 12px 14px 10px; }
}