/* Estimate Time/Distance — shared (My Guide map + Explore map) */
/* ═══ Estimate Time/Distance (Greg's slides 1-4, My Guide map first) ═══ */
.mg-etd-bar{display:flex !important;flex-direction:row !important;align-items:center;gap:6px;width:100%;box-sizing:border-box;height:26px;padding:0 12px;line-height:1.15;background:#f3f1ea;border-bottom:1px solid #e6e2d9;font-size:0.82rem;font-weight:700;cursor:pointer;color:#23201b}
.mg-etd-bar span{color:#b57713;font-weight:800}
.mg-etd-panel{width:100%;box-sizing:border-box;background:#fff;border-bottom:2px solid #e6e2d9;padding:8px 10px;flex:0 0 auto}
.etd-row{display:flex !important;flex-direction:row !important;gap:10px;width:100%;margin-bottom:6px}
.etd-field{flex:1;display:flex !important;flex-direction:column !important;position:relative;min-width:0}
.etd-field label{font-size:0.6rem;font-weight:800;letter-spacing:.08em;color:#8a8375;margin-bottom:2px}
.etd-field input,.etd-field select{border:2px solid #cfc9bc;border-radius:8px;height:30px;padding:0 8px;font-size:0.8rem;width:100%;box-sizing:border-box;background:#fff}
.etd-field input:focus{border-color:#e99821;outline:none}
.etd-list{position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid #e6e2d9;border-radius:8px;box-shadow:0 8px 20px rgba(20,16,8,.15);z-index:1500;max-height:180px;overflow-y:auto}
.etd-opt{padding:7px 10px;font-size:0.8rem;cursor:pointer;border-bottom:1px solid #f3f1ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etd-opt:hover{background:#fdf6ec}
.etd-mini{display:flex !important;flex-direction:row !important;align-items:center;gap:8px;border:2px solid #2d8f4e;border-radius:9px;padding:4px 6px;margin-top:5px;position:relative;background:#fff}
.etd-mini-img{width:34px;height:34px;border-radius:6px;background-size:cover;background-position:center;flex:0 0 auto}
.etd-mini-t{display:flex !important;flex-direction:column !important;min-width:0}
.etd-mini-t b{font-size:0.72rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etd-mini-t span{font-size:0.62rem;color:#8a8375;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etd-ab{position:absolute;top:-8px;right:-6px;background:#d9534f;color:#fff;font-size:0.62rem;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.mg-ab-pin{width:26px;height:26px;border-radius:50% 50% 50% 4px;background:#d9534f;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.etd-actions{display:flex !important;flex-direction:row !important;gap:10px;align-items:center;justify-content:center;margin:4px 0 2px}
.etd-calc{background:#e99821;color:#fff;border:none;border-radius:8px;height:32px;padding:0 22px;font-size:0.82rem;font-weight:800;letter-spacing:.04em;cursor:pointer}
.etd-reset{background:#fff;border:2px solid #cfc9bc;border-radius:8px;height:32px;padding:0 14px;font-size:0.78rem;font-weight:700;cursor:pointer;color:#6d675c}
.etd-err{font-size:0.75rem;color:#a3541a;text-align:center;padding:4px}
.etd-box{display:flex !important;flex-direction:row !important;gap:8px;border:2px solid #e99821;border-radius:10px;padding:8px 10px;margin-top:6px;background:#fffaf2}
.etd-col{flex:1;display:flex !important;flex-direction:column !important;align-items:center;text-align:center}
.etd-col u{font-size:0.62rem;font-weight:800;color:#8a5406;text-decoration:underline;text-underline-offset:2px;margin-bottom:2px}
.etd-col b{font-size:0.8rem}
.etd-col span{font-size:0.65rem;color:#8a8375}


/* ── Explore fullscreen-map overlay placement ── */
#map .mg-etd-bar.etd-on-explore{position:absolute;top:0;left:0;right:0;z-index:1050;box-shadow:0 2px 8px rgba(20,16,8,.15)}
#map .mg-etd-panel.etd-on-explore{position:absolute;top:44px;left:8px;right:8px;z-index:1050;border-radius:12px;border:1px solid #e6e2d9;box-shadow:0 14px 34px rgba(20,16,8,.25);max-height:calc(100% - 54px);overflow-y:auto}

/* ── standalone pin/popup/rail styles (the off-main branch has no
   page.css additions — everything ETD-related lives here) ── */
.mg-pin-wrap{background:none;border:none;opacity:1 !important}
.mg-pin{width:30px;height:30px;border-radius:50% 50% 50% 4px;display:flex;align-items:center;justify-content:center;font-size:14px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:1}
.mg-popup{max-width:240px}
.mg-popup-title{white-space:normal !important;word-break:break-word;font-weight:700;font-size:0.95rem;line-height:1.25;margin:2px 0}
.mg-popup-loc{font-size:0.75rem;color:#666}
.mg-popup-img{width:100%;height:84px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:6px}
.mg-popup-tags{height:auto;flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
.mg-popup .hash-tag.match{background-color:#2d8f4e}
.mg-popup-btns{display:flex !important;flex-direction:row !important;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.mg-popup-btns .mg-open{height:28px;font-size:0.8rem;border-color:#e99821;background:#fdf6ec}
.mg-rail .rail-chip,.mg-popup-btns .rail-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:2px solid #cfc9bc;border-radius:8px;background:#fff;font-size:0.85rem;font-weight:600;color:#23201b;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.mg-rail .rail-chip.active{border-color:#e99821;background:#fdf6ec}
.mg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;flex:0 0 auto}

/* map-overlay placement: bar sits BELOW the map's own top controls
   (Greg: the expand-distance element was being covered), rail below
   the bar, panel below both */
/* v2 (Greg): ✕ lives in the Co-Planners row; map grows taller —
   reclaims the old strip + the dead white space below the map so
   open popups fit. */
.etd-x-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:2px solid #cfc9bc;border-radius:8px;background:#fff;font-size:0.85rem;font-weight:700;color:#23201b;cursor:pointer;flex:0 0 auto;margin-right:6px}
.etd-x-chip.floating{position:absolute;top:6px;left:6px;z-index:1060;box-shadow:0 2px 8px rgba(20,16,8,.25)}
/* geometry now measured live by etdLayoutMap() — no vh guessing */
#map .leaflet-top.leaflet-left{top:52px} /* +/- below the bar+rail (A4) */
.mg-etd-panel.etd-done .etd-row,.mg-etd-panel.etd-done .etd-actions{display:none}
.etd-mini-actions{display:flex !important;flex-direction:row !important;gap:8px;justify-content:center;margin-top:6px}
.etd-mini-actions .etd-reset{height:26px;font-size:0.72rem;padding:0 10px}
#map .mg-etd-bar.etd-on-explore{top:0}
#map .etd-map-rail{position:absolute;top:0;left:0;right:0;z-index:1040;display:flex !important;flex-direction:row !important;gap:6px;padding:6px 8px;overflow-x:auto;background:rgba(255,255,255,.94);border-bottom:1px solid #e6e2d9;scrollbar-width:none}
#map .mg-etd-panel.etd-on-explore{top:44px}

/* Greg's screenshot solved the "empty" dropdowns: the map overlay's
   ancestry paints text WHITE (emoji ignore text color, letters don't) —
   rows were full all along, just invisible. Panel text is explicitly
   dark, no inherited shadow. */
.mg-etd-panel{color:#23201b !important;text-shadow:none !important}
.mg-etd-panel input,.mg-etd-panel select{color:#23201b !important}
.etd-opt{color:#23201b !important;text-shadow:none !important;background:#fff}
.etd-mini-t b{color:#23201b}.etd-box b{color:#23201b}
.etd-calc{color:#fff !important}
.mg-etd-bar{color:#23201b !important;text-shadow:none !important}

/* pin popups float ABOVE the bar/rail/panel — a tapped mini card can
   never be buried (Greg) — and the ➕From/➕To row inside them */
#map .leaflet-pane.leaflet-popup-pane{z-index:1055}
#myguide-map .leaflet-pane.leaflet-popup-pane{z-index:1055}
.etd-addrow{display:flex !important;flex-direction:row !important;gap:8px;margin-top:8px;justify-content:center}
.etd-addrow button{height:28px;padding:0 14px;border:2px solid #e99821;border-radius:8px;background:#fdf6ec;font-size:0.8rem;font-weight:700;color:#23201b;cursor:pointer}

/* Greg 7/21 pin-flow round: the direction swap between From and To */
.etd-swap{flex:0 0 auto;align-self:center;margin-top:10px;width:28px;height:28px;border-radius:50%;border:2px solid #cfc9bc;background:#fff;color:#2a4a74;font-weight:900;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.etd-swap:active{background:#fdf6ec;border-color:#e99821}