/* map: MapLibre canvas, our pins, controls, the card of the picked shop */
.mapwrap{position:relative;margin-top:10px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);height:min(62vh,560px);min-height:320px}
.mapctl{position:absolute;right:10px;top:10px;display:grid;gap:6px}
.mapctl button{min-width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);font-size:17px;padding:0 6px}
.mapctl .wide{font-size:11px}
.mapempty{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--card) 90%,transparent);box-shadow:var(--shadow-1);color:var(--sub);font-size:12px;pointer-events:none}
.mapcard{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 16px}
.mapcard .st{font-size:11px;color:var(--red);border:1px solid var(--red);border-radius:999px;padding:0 8px;flex:none}
.mapcard .acts{display:flex;gap:8px;margin-top:12px}
.mapattr{position:absolute;right:8px;bottom:6px;font-size:10px;color:var(--sub);background:color-mix(in srgb,var(--card) 80%,transparent);padding:1px 6px;border-radius:6px;text-decoration:none}

.mapwrap .mlmap{position:absolute;inset:0;width:100%;height:100%}   /* beats maplibre-gl.css (.maplibregl-map{position:relative}) */
.mlmap .maplibregl-canvas{outline:none}
.mapctl,.mapempty,.mapattr{z-index:2}
/* teardrop pins: tip on the spot. went = red, want = white with a red ring. name to the right */
.pinm{position:relative;width:26px;height:36px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pinm svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .2s var(--ease-spring);transform-origin:50% 100%}
.pinm .pm-b{fill:#fff;stroke:var(--red);stroke-width:2.4;stroke-linejoin:round}
.pinm .pm-d{fill:var(--red)}
.pinm.went .pm-b{fill:var(--red);stroke:#fff;stroke-width:1.8}
.pinm.went .pm-d{fill:#fff}
.pinm .pm-sh{fill:#000;opacity:.25}
.pinm.sel svg{transform:scale(1.3)}
.pinm .pl{position:absolute;left:24px;top:3px;white-space:nowrap;font-family:var(--serif);font-weight:700;font-size:13px;color:#1F1B19;
  background:rgba(255,255,255,.92);border-radius:6px;padding:1px 6px;box-shadow:0 1px 3px rgba(0,0,0,.18);pointer-events:none}
.pinm.sel .pl{font-size:14px;left:28px;top:-2px}
.pinm.nolabel .pl{display:none}
.herem{width:16px;height:16px;border-radius:50%;background:#4285F4;border:3px solid #fff;box-shadow:0 0 0 6px rgba(66,133,244,.22),0 1px 3px rgba(0,0,0,.3)}/* long names: cut short on the map (the card below shows the full name) */
.pinm .pl{max-width:7.5em;overflow:hidden;text-overflow:ellipsis}
.pinm.sel .pl{max-width:14em}

/* the picked shop's card, over the bottom of the map */
.mapinfo{position:absolute;left:10px;right:10px;bottom:22px;z-index:3}
.mapinfo:empty{display:none}
.mapinfo .mapcard{margin:0;position:relative;padding:12px 14px;box-shadow:var(--shadow-2)}
.mc-hd{display:grid;gap:2px;width:100%;text-align:left;background:none;border:0;padding:0 28px 0 0;color:inherit;font:inherit}
.mc-hd .name{margin:0;font-size:17px}
.mc-sub{font-size:12px;color:var(--sub)}
.mc-hd .starline{margin-top:2px}
.mc-hd .starline .stars{--sz:13px}
.mc-hd .starline .st-v{font-size:13px}
.mc-x{position:absolute;right:8px;top:6px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--sub);font-size:20px;line-height:1}
.mapcard .acts{flex-wrap:wrap;gap:6px;margin-top:10px}
.mapcard .acts .sbtn{font-size:12.5px;padding:6px 11px}
.mc-gm{text-decoration:none;display:inline-flex;align-items:center}
.mapinfo:not(:empty) ~ .mapattr{display:none}
/* today's picks: a gold pin */
.pinm.pick .pm-b{fill:var(--gold,#C9A14A);stroke:#fff;stroke-width:1.8}
.pinm.pick .pm-d{fill:#fff}
.pinm.pick{z-index:4}
.map-pk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);margin-left:4px}
.map-pk::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--gold) 50%,transparent)}
.mapcard .acts{flex-wrap:nowrap}.mapcard .acts .sbtn{white-space:nowrap}
.mapcard .acts{gap:5px}.mapcard .acts .sbtn{padding:6px 9px;min-width:0}
.maplibregl-ctrl-attrib{display:none!important}
.map-unloc{margin-left:auto;color:var(--sub);border-style:dashed}
/* 今日の候補: a bright yellow pin */
.pinm.pick .pm-b{fill:#FFC21A;stroke:#fff;stroke-width:1.8}
.pinm.pick .pm-d{fill:#5A4300}
.map-pk::before{background:#FFC21A;box-shadow:0 0 0 2px #fff,0 0 0 3px #E0A800}
.mapattr a{color:inherit;text-decoration:none}