/* the apps map page: one column on the site's dark theme; the map scrolls sideways inside its box on a phone */
.am{padding-top:40px;padding-bottom:64px}   /* top and bottom only: the sides are .wrap's gutter (16px on a phone) */
.am h1{font-size:clamp(28px,4vw,40px);font-weight:800;margin:10px 0 12px}
.am h2{font-size:22px;font-weight:800;margin:0 0 12px}
.am .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:24px;min-width:0}
.am .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.am .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;color:var(--muted);font-size:14px}
.am .legend i{display:inline-block;width:26px;height:0;border-top:3px solid;vertical-align:middle;margin-right:6px}
.am .legend .ok{border-color:var(--green)}.am .legend .partial{border-color:var(--orange);border-top-style:dashed}.am .legend .silent{border-color:var(--red);border-top-width:4px}
#map svg{display:block;min-width:720px;width:100%;height:auto}
#map text{font-family:inherit;fill:var(--text)}
#map .grp{fill:none;stroke:var(--line2);stroke-dasharray:4 4}
#map .grpl{fill:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
#map .node rect{fill:var(--card2);stroke:var(--line2);stroke-width:1.5}
#map .nm{font-size:14px;font-weight:700}
#map .sub{fill:var(--muted);font-size:11px}
#map .glyph{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#map .e{fill:none;stroke-width:2}
#map .e.ok{stroke:var(--green)}#map .e.partial{stroke:var(--orange);stroke-dasharray:6 4}#map .e.silent{stroke:var(--red);stroke-width:3.2}
#map .tag rect{fill:var(--bg2);stroke:var(--line2)}
#map .tag text{font-size:11px;font-weight:700;font-family:"JetBrains Mono",ui-monospace,monospace}
.am table{width:100%;border-collapse:collapse;font-size:14.5px}
.am th,.am td{text-align:left;padding:10px;border-top:1px solid var(--line);vertical-align:top}
.am th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:0}
.am .num{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.am .how{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.am .pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;border:1px solid}
.am .pill.ok{color:var(--green)}.am .pill.partial{color:var(--orange)}.am .pill.silent{color:var(--red)}
.am .appc{white-space:nowrap}.am .appc img{display:inline-block;vertical-align:middle;margin-right:8px;border-radius:7px}
.am .tbl{overflow-x:auto}
.am .lbl{display:none}
@media(max-width:600px){
  .am .tbl table,.am .tbl tbody,.am .tbl tr,.am .tbl td{display:block}
  .am .tbl thead{display:none}
  .am .tbl tr{border-top:1px solid var(--line);padding:8px 0}
  .am .tbl td{border:0;padding:4px 10px}
  .am .tbl td.num{display:none}
  .am .tbl .lbl{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .am .tbl td.appc{padding-bottom:2px}
}
.am .foot{margin-top:28px;color:var(--muted);font-size:14px}
.am .foot a{color:var(--blue);text-decoration:underline}

/* interaction: fat invisible hit strokes, highlight / dim, popover */
#map .e{pointer-events:none;transition:opacity .15s,stroke-width .15s}
#map .hit{fill:none;stroke:transparent;stroke-width:22;pointer-events:stroke;cursor:pointer;outline:none}
#map .node,#map .tag{cursor:pointer;outline:none}
#map .node rect,#map .tag rect,#map .grp{transition:opacity .15s,stroke .15s}
#map .node,#map .tag,#map .grp,#map .e{transition:opacity .15s}
#map svg.dim .e,#map svg.dim .node,#map svg.dim .tag,#map svg.dim .grp,#map svg.dim .grpl{opacity:.2}
#map svg.dim .e.on,#map svg.dim .node.on,#map svg.dim .tag.on,#map svg.dim .grp.on{opacity:1}
#map .e.on{stroke-width:4}#map .e.silent.on{stroke-width:5}
#map .node.on rect{stroke:var(--blue);fill:var(--card)}
#map .grp.on{stroke:var(--blue)}
#map .tag.on rect{stroke:var(--blue)}
#map .node:focus-visible rect{stroke:var(--blue);stroke-width:2.5}
#map .e.flashe{animation:amflash .6s ease-in-out 3}
@keyframes amflash{50%{stroke-width:8}}
.am tr[data-i],.am tr[data-n]{transition:background .15s}
.am tr.on{background:color-mix(in srgb,var(--blue) 14%,transparent)}
.am tr.flash{animation:amrow 1.6s ease-out}
@keyframes amrow{0%,40%{background:color-mix(in srgb,var(--blue) 30%,transparent)}100%{background:transparent}}
.am .up{font:inherit;font-size:12px;color:var(--blue);background:none;border:1px solid var(--line2);border-radius:99px;padding:2px 9px;margin-left:6px;cursor:pointer;white-space:nowrap}
.am .up:hover,.am .up:focus-visible{border-color:var(--blue)}
.am .hint{margin:12px 0 0;color:var(--muted);font-size:13.5px}
.ampop{position:fixed;z-index:60;left:0;top:0;width:max-content;background:var(--card2);color:var(--text);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;box-shadow:0 12px 36px rgba(0,0,0,.45);font-size:14px;line-height:1.45;pointer-events:auto}
.ampop[hidden]{display:none}
.ampop p{margin:8px 0 0}
.ampop .ph{display:flex;align-items:center;gap:8px}
.ampop .pn{font:700 12px "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.ampop .pw{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px}
.ampop .ends{display:flex;flex-wrap:wrap;gap:4px 8px}
.ampop .chip{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.ampop .chip img{border-radius:5px}.ampop .gi{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ampop .arr{color:var(--muted)}
.ampop .pwhat{font-weight:600}.ampop .phow{color:var(--muted);font-size:13px}.ampop .pmiss{font-size:13px}
.ampop .pgo{margin-top:10px;font:inherit;font-size:13px;color:var(--blue);background:none;border:1px solid var(--line2);border-radius:99px;padding:3px 11px;cursor:pointer}
.ampop .pgo:hover,.ampop .pgo:focus-visible{border-color:var(--blue)}
.ampop .pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;border:1px solid}
.ampop .pill.ok{color:var(--green)}.ampop .pill.partial{color:var(--orange)}.ampop .pill.silent{color:var(--red)}
@media(max-width:600px){.am .tbl .up{display:inline-block;margin:6px 0 0 0}.am .tbl td:last-child{padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){#map .e,#map .node,#map .tag,#map .grp,.am tr[data-i],.am tr[data-n]{transition:none}#map .e.flashe{animation:none;stroke-width:6}.am tr.flash{animation:none;background:color-mix(in srgb,var(--blue) 22%,transparent)}}