.map-wrap{margin:20px 0 6px;border-top:1px solid var(--ink);
          border-bottom:1px solid var(--line);padding:10px 0 6px}
.map-wrap svg{touch-action:manipulation}
.viz .ny{fill:var(--v-main-soft);stroke:var(--v-axis);stroke-width:1;
         opacity:.5}
.viz .sd{fill:var(--v-main);opacity:.82;pointer-events:none}
.viz .hit{fill:transparent;cursor:pointer}
/* 锚城压在命中圈上面，不加这条就会挡住底下那个邮编的点击。 */
.viz .anc,.viz .anl{pointer-events:none}
.viz .anc{fill:var(--v-ink-2);opacity:.55}
/* 城市名压在点云上面，没有描边就读不出来。paint-order 让描边先画、
   字面后画，等于给字加一圈纸色的光晕，不用垫一个矩形底。 */
.viz .anl{fill:var(--v-ink);font-size:10.5px;font-family:var(--sans);
          paint-order:stroke;stroke:var(--v-surface);stroke-width:3px;
          stroke-linejoin:round}
/* .viz svg 是 overflow:visible，所以「你在这里」不能靠挪到画布外来藏 ——
   它会老老实实画在页面左上角。必须真的 display:none。 */
.viz .me{fill:var(--mark);stroke:var(--ink);stroke-width:2;display:none}
.viz .me.on{display:block}

.geo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 4px}
.geo button{font:600 13px/1 var(--sans);padding:11px 16px;cursor:pointer;
            border:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.geo button:hover{opacity:.86}
.geo button[data-on=on]{background:transparent;color:var(--ink)}
.geo-msg{font:400 12.5px/1.5 var(--mono);letter-spacing:-.01em;
         color:var(--ink-3);flex:1;min-width:200px}

.mapbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.mapbar input{flex:1;min-width:190px;padding:10px 12px;
              font:400 15px/1.4 var(--sans);border:1px solid var(--line);
              background:var(--stock);color:var(--ink)}
.count{font:400 12px/1.5 var(--mono);color:var(--ink-3);margin:10px 0 0}
.count b{color:var(--ink);font-weight:600}

.shops{list-style:none;margin:8px 0 0;padding:0;
       border-top:1px solid var(--ink)}
.shops li{border-bottom:1px solid var(--line-soft)}
.shops li[hidden]{display:none}
.grp h3{margin:0;padding:15px 0 7px;font:600 12px/1.3 var(--sans);
        letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.grp h3 span{float:right;font-weight:400;letter-spacing:0;text-transform:none;
             font-family:var(--mono)}
.shop{display:flex;gap:12px;align-items:baseline;padding:11px 0 12px;
      flex-wrap:wrap}
.shop .nm2{font:600 15px/1.35 var(--sans);flex:1 1 100%;
           overflow-wrap:anywhere}
.shop .addr{font:400 13px/1.45 var(--mono);letter-spacing:-.01em;
            color:var(--ink-2);flex:1 1 auto;min-width:0;
            overflow-wrap:anywhere}
.shop .dist{font:600 13px/1.4 var(--mono);font-variant-numeric:tabular-nums;
            color:var(--ink);white-space:nowrap}
.shop .dist[hidden]{display:none}
.shop .mapl{font:500 12.5px/1.4 var(--sans);white-space:nowrap;
            text-decoration-thickness:1px}
.shop .mapl:hover,.shop .mapl:focus-visible{text-decoration-thickness:2px}
.shop .tag{font:600 10px/1 var(--mono);border:1px dashed var(--line);
           padding:4px 5px;color:var(--ink-3);white-space:nowrap}
.empty{padding:26px 0;color:var(--ink-3);font:400 14px/1.6 var(--serif)}
.empty[hidden]{display:none}
/* 宽屏没有「折叠」这回事：summary 藏掉，details 永远是展开的那一态。 */
.mapfold{margin:0}
.mapfold>summary{display:none}
@media(max-width:640px){
  .mapfold>summary{display:block;font:600 13px/1.4 var(--sans);
    color:var(--ink);padding:13px 0}
  .shop{gap:8px}
  .shop .addr{flex:1 1 100%}
  .geo button{flex:1 1 100%}
  /* 8.7px 的命中区在手指下面就是随机数。不接点击 —— 一次误触会把列表
     悄悄筛到错的邮编，用户只看到 702 家店凭空消失，比没反应糟得多。 */
  .viz .hit{pointer-events:none}
  /* viewBox 720 在 390px 视口下缩放比约 0.49 —— 10.5 单位的城市名实际是
     5.2 CSS px，等于一排糊掉的灰点。和 charts.py 放大 .dl 同一处理：
     撑大字号而不是藏掉，六个城市名正是这张图能被认出是纽约州的原因。 */
  .viz .anl{font-size:20px;stroke-width:5px}
  .viz .anc{r:4}
  /* 触摸目标一律做到 44px（实测：默认下 geo 按钮 36.8、筹码 39.4、
     搜索框 42.8、"Open in maps" 只有 17.5）。只放大这一页的，不动全站 .chip。
     mapl 是每家店的主操作，行高因此涨约 24px —— 值得。 */
  .geo button{padding:15px 16px}
  .mapbar input{padding:12px}
  .mapbar .chip{padding:13px 13px;font-size:13.5px}
  .shop .mapl{display:inline-block;padding:14px 0}
}