/* =============================================================
   DOODLY — Maps widget (picker / mini / route / address manager)
   SVG map surface styled to the design system; theme-aware chrome,
   fixed map palette so the "map" reads consistently.
   ============================================================= */
.mp-picker { display:block; }
.mp-search { position:relative; margin-bottom:10px; }
.mp-search-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
.mp-search-i { width:100%; padding:.78rem 2.6rem .78rem 2.4rem; border-radius:13px; border:1.5px solid var(--line); background:var(--surface); color:var(--forest); font:inherit; font-size:.94rem; transition:border-color .2s, box-shadow .2s; }
.mp-search-i:focus { outline:none; border-color:var(--leaf); box-shadow:var(--ring); }
.mp-geo { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:9px; border:0; background:var(--mint-soft); color:var(--leaf-600); cursor:pointer; display:grid; place-items:center; }
.mp-geo:hover { background:var(--mint); }
.mp-suggest { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; }
.mp-suggest[hidden] { display:none; }
.mp-sg { width:100%; display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border:0; background:none; cursor:pointer; text-align:left; color:var(--forest); }
.mp-sg:hover { background:var(--mint-soft); }
.mp-sg svg { color:var(--leaf-600); flex:0 0 auto; }
.mp-sg span { display:flex; flex-direction:column; }
.mp-sg b { font-size:.9rem; } .mp-sg small { color:var(--ink-3); font-size:.76rem; }

.mp-stage { position:relative; height:280px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.mp-svg, .mp-mini svg, .mp-route svg { width:100%; height:100%; display:block; cursor:grab; }
.mp-svg:active { cursor:grabbing; }
.mp-hint { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:600; color:#0c4631; background:rgba(255,255,255,.86); border-radius:999px; padding:.3rem .6rem; backdrop-filter:blur(4px); }
.mp-hint svg { color:var(--leaf-600); }

/* fixed map palette (reads as a map in both themes) */
.mp-land { fill:#eef3ec; }
.mp-water, .mp-river { fill:none; }
.mp-river { stroke:#bfe0ef; stroke-width:26; stroke-linecap:round; opacity:.9; }
.mp-park { fill:#d8efcf; }
.mp-road { stroke:#ffffff; stroke-width:7; }
.mp-road-main { stroke:#ffe7a8; stroke-width:14; }
.mp-roads { opacity:.95; }
.mp-pin { color:#1FAE66; }
.mp-pin path { fill:#1FAE66; stroke:#0f7e45; stroke-width:1.5; filter:drop-shadow(0 4px 6px rgba(15,61,46,.35)); }
.mp-pin-dot { fill:#fff; }
.mp-pin-main { animation:mpDrop .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes mpDrop { 0%{ transform:translateY(-14px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }

/* mini map */
.mp-mini { position:relative; width:100%; height:100%; border-radius:14px; overflow:hidden; }
.mp-mini-open { position:absolute; right:8px; bottom:8px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.9); color:var(--leaf-600); display:grid; place-items:center; box-shadow:var(--shadow-sm); }

/* route map */
.mp-route { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.mp-route-line { fill:none; stroke:#1FAE66; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 14; opacity:.9; animation:mpDash 18s linear infinite; }
@keyframes mpDash { to { stroke-dashoffset:-320; } }
.mp-cur-halo { fill:#1FAE66; opacity:.25; animation:mpPulse 2s ease-out infinite; }
.mp-cur-dot { fill:#1FAE66; stroke:#fff; stroke-width:2.5; }
@keyframes mpPulse { 0%{ transform:scale(1); opacity:.4; } 100%{ transform:scale(2.4); opacity:0; } }
.mp-stop { cursor:pointer; }
.mp-stop-c { fill:#0F3D2E; stroke:#fff; stroke-width:2.5; filter:drop-shadow(0 3px 5px rgba(15,61,46,.3)); transition:fill .2s; }
.mp-stop.done .mp-stop-c { fill:#1FAE66; }
.mp-stop-n { fill:#fff; font-size:15px; font-weight:800; }
.mp-stop:hover .mp-stop-c { fill:#169A57; }
.mp-route-meta { position:absolute; left:10px; bottom:10px; display:flex; gap:.5rem; }
.mp-route-meta span { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700; color:#0c4631; background:rgba(255,255,255,.9); border-radius:999px; padding:.3rem .6rem; backdrop-filter:blur(4px); }
.mp-route-meta svg { color:var(--leaf-600); }

/* address manager */
.ad-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:620px){ .ad-grid { grid-template-columns:1fr 1fr; } }
.ad-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.ad-mini { height:130px; background:#eef3ec; }
.ad-body { padding:14px; }
.ad-top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:6px; }
.ad-label { font-weight:800; color:var(--forest); }
.ad-default { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--leaf-600); background:var(--mint-soft); border-radius:999px; padding:.16rem .5rem; }
.ad-line { color:var(--ink-2); font-size:.9rem; }
.ad-area { color:var(--ink-3); font-size:.82rem; margin-top:2px; }
.ad-acts { display:flex; gap:.8rem; margin-top:10px; }
.ad-acts .link { background:none; border:0; color:var(--leaf-600); font-weight:700; font-size:.84rem; cursor:pointer; padding:0; }
.ad-acts .ad-del { color:#c0392b; }
.ad-add { align-items:center; justify-content:center; gap:.5rem; color:var(--leaf-600); font-weight:700; border-style:dashed; min-height:160px; cursor:pointer; background:var(--surface-2); }

/* address modal */
.ad-modal { position:fixed; inset:0; z-index:1320; display:grid; place-items:center; padding:16px; background:rgba(8,30,21,.42); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.ad-modal.show { opacity:1; pointer-events:auto; }
.ad-modal-card { width:100%; max-width:460px; max-height:92vh; overflow:auto; background:var(--surface); border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:18px; transform:translateY(16px) scale(.97); transition:transform .3s cubic-bezier(.2,1.1,.3,1); }
.ad-modal.show .ad-modal-card { transform:none; }
.ad-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ad-modal-head h3 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.25rem; }
.ad-x { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--forest); cursor:pointer; display:grid; place-items:center; }
.ad-sv { margin:10px 0; }
.ad-sv.shake { animation:mpShake .42s; }
.ad-ok { display:flex; align-items:center; gap:.4rem; color:var(--leaf-600); font-weight:700; font-size:.86rem; }
.ad-no { display:flex; align-items:center; gap:.4rem; color:#c0392b; font-weight:700; font-size:.86rem; }
.ad-labels { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.ad-lab { padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.82rem; cursor:pointer; }
.ad-lab.sel { border-color:var(--leaf); background:var(--mint-soft); color:var(--leaf-600); box-shadow:0 0 0 1px var(--leaf); }
.ad-f { width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font:inherit; margin-bottom:10px; }
.ad-f:focus { outline:none; border-color:var(--leaf); box-shadow:var(--ring); }
.ad-readonly { font-size:.82rem; color:var(--ink-3); margin-bottom:12px; }
.ad-save { width:100%; }
@keyframes mpShake { 10%,90%{ transform:translateX(-1px); } 30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .mp-pin-main, .mp-route-line, .mp-cur-halo { animation:none !important; }
}