/* =============================================================
   map.css - "Map" panel (#panel-map)
   -------------------------------------------------------------
   Contains: Google My Maps iframe, compact mileage/time KPIs,
   compact stint cards, and named place cards. Data comes from
   js/data/route-stints.js and js/data/map-spots.js.
   ============================================================= */
/* ============ MAP ============ */
#panel-map{ padding-inline:0; padding-bottom:0 }
.map-pager-shell{ position:relative; padding-bottom:8px; overflow:hidden; overflow-anchor:none }
.map-page-dots{
  position:fixed; bottom:calc(76px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:25;
  width:max-content; display:flex; align-items:center; gap:9px; margin:0;
  padding:8px 11px; border-radius:999px; background:rgba(18,35,47,.94);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 22px -12px rgba(18,35,47,.65), 0 1px 8px rgba(18,35,47,.18);
  backdrop-filter:blur(10px);
  overflow-anchor:none;
}
.map-dot{
  width:9px; height:9px; border:0; border-radius:999px; padding:0; background:rgba(238,243,245,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  transition:width .18s ease, background .18s ease; cursor:pointer;
}
.map-dot.active{ width:24px; background:var(--buoy); box-shadow:none }
.map-pager{
  position:relative; padding:0 0 62px; overflow:hidden;
  cursor:grab; touch-action:auto;
}
.map-pager.dragging{ cursor:grabbing }
.map-pager.dragging,
.map-pager.dragging *{ user-select:none }
.map-page{
  position:absolute; inset:0 auto auto 0; width:100%; min-width:100%; padding-inline:16px;
  background:var(--mist);
  pointer-events:none;
  will-change:transform;
}
.map-page.active{ pointer-events:auto }
.map-page.animating{ transition:transform .24s ease }
.map-page > .section-title{ margin-top:0 }

.route-summary{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px }
.route-stat-card{ background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:11px 12px }
.route-stat-card .rs-num{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--ink) }
.route-stat-card .rs-label{ font-size:10px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.06em; margin-top:2px }

.map-frame{ position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow); background:var(--paper) }
.google-map-frame{ position:relative; z-index:1; width:100%; height:380px; border:0; display:block; background:var(--line); pointer-events:auto; touch-action:auto }
.map-swipe-layer{ display:none !important; pointer-events:none !important }
.map-cta{ position:relative; z-index:3; display:flex; gap:10px; padding:12px 14px }
.btn{
  flex:1; text-align:center; padding:10px 12px; border-radius:9px; font-size:12.5px; font-weight:700;
  text-decoration:none; font-family:var(--font-body);
}
.btn.primary{ background:var(--ink); color:var(--paper) }
.btn.ghost{ background:var(--mist); color:var(--ink); border:1px solid var(--line) }

.stint-list{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:12px }
.stint-card{ background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:11px 12px }
.stint-kicker{ font-family:var(--font-mono); font-size:9.5px; color:var(--teal); font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.stint-card h4{ margin:3px 0 0; font-size:13px; line-height:1.25 }
.stint-meta{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.stint-meta span{ font-family:var(--font-mono); font-size:11px; font-weight:600; background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:4px 8px }

.map-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px }
.map-actions a{
  display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 9px;
  border-radius:8px; background:var(--mist); border:1px solid var(--line); color:var(--ink);
  text-decoration:none; font-size:11.5px; font-weight:700;
}
.map-actions a:first-child{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

.spot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
.spot{
  background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:10px 11px;
  color:var(--ink); min-width:0;
}
.spot-top{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:4px }
.spot-top span,
.spot-top small{ font-family:var(--font-mono); font-size:9px; color:var(--teal); font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.spot-top small{ color:var(--ink-45) }
.spot .sname{ font-size:12.5px; font-weight:700; line-height:1.22 }
.spot .sarea{ font-size:10.5px; color:var(--ink-45); margin-top:2px }