/* /map.html — the explore map. */
.xmap{height:min(62vh,560px);margin:.5rem 0 .3rem}
@media (min-width:760px){.xmap{height:min(68vh,680px)}}
.xmap .mdmap-draw{height:100%}
.xmap .xdraw{height:100%;object-fit:cover}
.xbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 .2rem}
.xbtn{min-height:44px;padding:.4rem .9rem;border-radius:.6rem;font:inherit;
  font-weight:700;border:2px solid var(--ant);background:#fff;color:var(--ant-dark);
  cursor:pointer}
.xbtn:hover{background:var(--row-hover)}
.xbtn[aria-busy="true"]{opacity:.6}
.xcount{color:var(--ink-soft);font-size:.9rem}
.xhint{color:var(--gloss);font-size:.88rem;margin:.1rem 0 .8rem}
.xpick{margin:.6rem 0 1.2rem}
.xpickh{font-size:1.05rem;margin:.2rem 0 .5rem}
.xprovh{font-size:.92rem;margin:.6rem 0 .3rem;color:var(--ink-soft);font-weight:700}
.xchips{display:flex;flex-wrap:wrap;gap:.4rem}
/* A chip is a fingertip tall, and carries the ink its dots will be drawn in
   once it is on — so the map and the chip row are one legend. */
.xchip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.35rem .8rem;border-radius:999px;border:1.5px solid var(--warm-border);
  background:#fff;font:inherit;cursor:pointer;color:var(--ink)}
.xchip:hover{border-color:var(--ant)}
.xchip .count{color:var(--gloss);font-size:.82rem}
.xswatch{width:12px;height:12px;border-radius:50%;flex:none;
  background:var(--warm-border);border:1px solid var(--dashed)}
.xchip[aria-pressed="true"]{border-color:var(--ink);border-width:2px;
  background:var(--card-alt);font-weight:700}
.xchip[aria-pressed="true"] .xswatch{border-color:rgba(0,0,0,.35)}
.xchip[disabled]{opacity:.45;cursor:default}
.xdir{margin-top:1.4rem;border-top:2px solid var(--warm-border);padding-top:.8rem}
.xlist{margin:.5rem 0}
.xlist h3{font-size:.95rem;margin:.4rem 0 .2rem;color:var(--ink-soft)}
.xlist ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.xlist li{font-size:.95rem}
/* With scripting the chips ARE the picker, so the plain list below is the
   directory rather than a duplicate control. Without scripting nothing is
   hidden and the list is the only way through — which is the point. */
@media print{.xbar,.xpick{display:none}}
