/* tap.css — the card a touch on any map opens. */
.mdtap{position:fixed;z-index:60;left:0;right:0;bottom:0;
  background:var(--card);color:var(--ink);
  border-top:3px double var(--ant);
  box-shadow:0 -.4rem 1.6rem rgba(42,30,22,.18);
  max-height:58vh;overflow-y:auto;overscroll-behavior:contain;
  padding:.85rem 1rem 1.1rem;font-size:1rem;line-height:1.45}
.mdtap[hidden]{display:none}
/* A wide screen has room beside the map, so the card stops covering it. Docked
   bottom-right rather than centred for the same reason the sheet sits low: the
   thing the reader pointed at is usually above their finger, not under it. */
@media (min-width:900px){
  .mdtap{left:auto;right:1rem;bottom:1rem;width:23rem;
    border:2px solid var(--warm-border);border-top:3px double var(--ant);
    border-radius:.7rem;max-height:min(70vh,34rem);
    box-shadow:0 .5rem 1.8rem rgba(42,30,22,.22)}
}
.mdtap-head{display:flex;gap:.5rem;align-items:flex-start}
.mdtap-back,.mdtap-x{flex:none;min-width:44px;min-height:44px;border:0;
  background:none;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;
  color:var(--ink-soft);border-radius:.4rem}
.mdtap-back:hover,.mdtap-x:hover{background:var(--row-hover);color:var(--ink)}
.mdtap-x{margin-left:auto}
.mdtap-name{font-size:1.18rem;font-weight:800;margin:.15rem 0 0;
  overflow-wrap:anywhere}
.mdtap-name:focus{outline:3px solid var(--ant);outline-offset:2px}
.mdtap-en{color:var(--ink-soft);font-size:.95rem;margin:.1rem 0 0;
  overflow-wrap:anywhere}
.mdtap-rom{color:var(--gloss);font-size:.85rem;margin:.05rem 0 0;font-style:italic}
.mdtap-facts{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0}
.mdtap-fact{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;
  border:1.5px solid var(--warm-border);border-radius:999px;
  padding:.2rem .6rem;background:var(--card-alt);color:var(--ink)}
/* A tag is a control, so it is a fingertip tall and says so by being a button
   or a link. A fact is not a control and never pretends to be one. */
.mdtap-tag{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  padding:.3rem .8rem;border-radius:999px;border:1.5px solid var(--warm-border);
  background:#fff;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;
  text-decoration:none}
.mdtap-tag:hover{border-color:var(--ant);background:var(--row-hover)}
.mdtap-tag[aria-pressed="true"]{background:var(--ink);color:var(--card);
  border-color:var(--ink);font-weight:700}
.mdtap-reach{margin:.2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.mdtap-reach a{min-height:2.75rem;display:inline-flex;align-items:center}
.mdtap-lamp{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;
  margin:.5rem 0 0}
.mdtap-lamp b{width:.65rem;height:.65rem;border-radius:50%;display:inline-block;
  flex:none}
.mdtap-open b{background:#1f6b57}
.mdtap-shut b{background:var(--dashed)}
.mdtap-filt{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  margin:.5rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.mdtap-filt a,.mdtap-filt button{font:inherit;font-size:.85rem;
  min-height:44px;display:inline-flex;align-items:center;padding:0 .5rem;
  border:0;background:none;color:var(--ant-dark);cursor:pointer;
  text-decoration:underline}
.mdtap-near{margin:.7rem 0 0;border-top:1.5px solid var(--warm-border);
  padding-top:.5rem}
.mdtap-near h3{font-size:.8rem;font-weight:700;letter-spacing:.03em;
  color:var(--ink-soft);margin:0 0 .2rem}
.mdtap-near ul{list-style:none;margin:0;padding:0}
.mdtap-near button{display:flex;width:100%;gap:.6rem;align-items:baseline;
  text-align:left;min-height:44px;border:0;background:none;font:inherit;
  padding:.35rem .3rem;border-radius:.4rem;cursor:pointer;color:var(--ink)}
.mdtap-near button:hover{background:var(--row-hover)}
.mdtap-near .far{margin-left:auto;color:var(--gloss);font-size:.85rem;
  white-space:nowrap}
.mdtap-do{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 0}
.mdtap-do a,.mdtap-do button{display:inline-flex;align-items:center;
  min-height:44px;padding:.35rem .9rem;border-radius:999px;font:inherit;
  font-size:.92rem;border:2px solid var(--warm-border);background:#fff;
  color:var(--ink);cursor:pointer;text-decoration:none}
.mdtap-do .mdtap-go{background:var(--ant);border-color:var(--ant);color:#fff;
  font-weight:700}
.mdtap-do .mdtap-go:hover{background:var(--ant-dark);border-color:var(--ant-dark)}
.mdtap-do .on{background:var(--card-alt);border-color:var(--ink)}
.mdtap :focus-visible{outline:3px solid var(--ant);outline-offset:2px}
/* The dot that was touched, marked on whatever kind of map it was. */
.mdtap-lit{outline:3px solid var(--ant-dark);outline-offset:2px;border-radius:50%}
@media (prefers-reduced-motion:no-preference){
  .mdtap{animation:mdtap-in .14s ease-out}
  @keyframes mdtap-in{from{transform:translateY(.6rem);opacity:.4}
    to{transform:none;opacity:1}}
}
@media print{.mdtap{display:none}}