.friends-map-section { max-width:76rem; margin:5rem auto 0; padding-top:3rem; border-top:1px solid var(--line); scroll-margin-top:130px; }
.map-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.map-heading h2 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; margin:.5rem 0; }
#map-count { color:var(--brand-pink); white-space:nowrap; font-size:.85rem; }
.map-intro,.map-editor p,#map-empty { color:var(--muted); line-height:1.6; }
.map-preview { border-left:3px solid var(--brand-pink); padding:.6rem 1rem; font-size:.85rem; background:rgba(234,197,196,.06); }
.map-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:1.5rem; }
#friends-map { min-height:560px; background:#e5dfd2; z-index:0; }
.map-editor { padding:1.5rem; background:var(--paper-2); min-width:0; }
.map-editor h3 { font-size:1.8rem; line-height:1.1; margin:.5rem 0 1rem; }
.map-editor label { display:block; font-size:.85rem; }
.map-editor input:not([type=checkbox]),.map-editor textarea { display:block; width:100%; margin:.5rem 0 1rem; border:1px solid var(--line); border-radius:5px; padding:.7rem; background:var(--paper); color:var(--ink); font:inherit; }
.map-editor textarea { resize:vertical; }
.map-coordinates { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
#map-length { display:block; text-align:right; color:var(--muted); font-size:.75rem; }
.map-editor .map-consent { display:flex; align-items:start; gap:.5rem; margin:1rem 0; line-height:1.5; }
.map-consent input { margin-top:.25rem; }
.map-editor .button { width:100%; }
.map-delete { padding:.6rem 0; background:none; border:0; color:var(--brand-pink); font:inherit; cursor:pointer; text-decoration:underline; }
.map-friends { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.map-friends button { background:var(--paper-2); border:1px solid var(--line); border-radius:30px; padding:.6rem 1rem; color:var(--ink); font:inherit; cursor:pointer; }
.friend-symbol { display:grid; place-items:center; color:var(--brand-red); background:#fff1df; border:2px solid var(--brand-red); border-radius:50%; box-shadow:0 2px 8px #0006; font:25px/1 "Segoe UI Symbol","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.friend-symbol-draft { border-style:dashed; box-shadow:0 0 0 5px #ab211f30; }
.map-icon-picker { border:0; padding:0; margin:1rem 0; min-width:0; }
.map-icon-picker legend { font-size:.85rem; margin-bottom:.75rem; }
.map-icons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.map-editor .map-icon-option { position:relative; cursor:pointer; text-align:center; }
.map-editor .map-icon-option input { position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; }
.map-icon-option > span:first-of-type { display:grid; place-items:center; height:46px; background:var(--paper); border:1px solid var(--line); border-radius:8px; color:var(--brand-pink); font:26px/1 "Segoe UI Symbol","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.map-icon-option input:checked + span { border:2px solid var(--brand-pink); background:#57221e; }
.map-icon-option input:focus-visible + span { outline:2px solid white; outline-offset:3px; }
.map-icon-option input:disabled ~ span { opacity:.5; cursor:wait; }
.map-icon-caption { display:block; margin-top:.3rem; font-size:.65rem; line-height:1.2; color:var(--muted); }
.leaflet-popup-content-wrapper { background:#1a100e; color:#f7f2e8; border-radius:8px; }
.leaflet-popup-tip { background:#1a100e; }
.leaflet-popup-content { font-family:"Space Grotesk",sans-serif; line-height:1.6; overflow-wrap:anywhere; }
.leaflet-popup-content strong { font-size:1.1rem; color:#eac5c4; }
.leaflet-popup-content p { white-space:pre-wrap; margin:.6rem 0; }
/* Keep the complete desktop map below the fixed header, including after sign-in. */
@media(min-width:821px) {
  .map-layout { height:min(740px,calc(100dvh - 110px)); scroll-margin-top:90px; }
  #friends-map { min-height:0; height:100%; }
  .map-editor { min-height:0; overflow-y:auto; padding:1rem 1.25rem; }
  .map-editor > .eyebrow { margin:0 0 .5rem; }
  .map-editor h3 { font-size:1.5rem; margin:.4rem 0 .75rem; }
  .map-editor p { margin:.6rem 0; font-size:.875rem; line-height:1.45; }
  .map-icon-picker { margin:.65rem 0; }
  .map-icon-picker legend { margin-bottom:.5rem; }
  .map-icon-option > span:first-of-type { height:40px; }
  .map-editor input:not([type=checkbox]):not([type=radio]),.map-editor textarea { margin:.35rem 0 .65rem; padding:.55rem; }
  .map-editor textarea { height:76px; min-height:60px; }
  .map-editor .map-consent { margin:.65rem 0; font-size:.8rem; line-height:1.4; }
  .map-editor .button { min-height:44px; padding:.7rem 1rem; }
  .map-delete { padding:.4rem 0; font-size:.875rem; }
  #map-status:empty { display:none; }
}
@media(max-width:820px) { .map-layout { grid-template-columns:1fr; } #friends-map { min-height:clamp(300px,50svh,480px); } .map-heading { display:block; } .map-editor { padding:1.25rem; } .friends-map-section { scroll-margin-top:calc(var(--header-offset) + 1rem); } }