/* THE MAP BUBBLE - one stylesheet for the home map and the site-page map (25 Sep 2026).
   Nuo: "fix the position and look of the speech bubbles showing site logos on the map! Right now it's too close to the
   flower! Also make sure the bubbles are always on top of other flowers! Make the bubble look the same on site pages, with
   the same arrow pointing to the flower!" Interviewed: the tail tip clears the flower by ~8px; 8px corners like every
   button (E9); a 1px rule and no thicker "hot" rule; a bigger mark with more padding; the neighbourhood in 11px tracked caps;
   Google's own title tooltip off; on a site page the sister flowers get the same bubble on hover.

   WHY IT IS ONE FILE. Until today the home page carried the bubble and its tail inline, and site-page.css carried a
   different bubble with NO tail - the solver on the site page set data-dir and --tx exactly as the home page's does, and
   nothing drew them. Two renderers, one contract, and the second copy had already drifted. The home page links this file;
   site-page.css @imports it as its first rule. A page that draws .pin .chip and loads neither has no bubble, on purpose.

   THE STACKING RULE, AND WHY .pin HAS NO transform AND NO z-index. A transform (or a z-index) on .pin makes it a stacking
   context, and a chip inside one pin can then never rise above a LATER sibling pin's flower, whatever z-index the chip
   carries - that is what "the bubble is behind the flower" was. So the pin is centred on its point with negative margins
   (each page sets them for its own flower size), it has no z-index, and the CHIP carries z-index 20 - which now resolves in
   the overlay's stacking context, above every flower on the map. The hovered / tapped pin (.hot, :hover) takes 1000 as
   before, so its bubble is above the other bubbles too. .pin.me on a site page keeps z-index 2 so the site's own flower
   sits over its sisters; its chip is inside that context and still above them.

   THE TAIL. Two triangles, ink behind paper, on the edge that faces the flower; --tx / --ty is where the flower's centre
   falls along that edge (the solver sets them). 9px tall. The solvers leave GAP + TAIL = 17px between the flower's edge
   and the bubble's edge, so the tail's tip clears the flower by 8px. */
.pin .chip{position:absolute;left:0;top:0;z-index:20;transform:translate(-50%,-50%) scale(var(--cs,1));--cs:.92;--tx:50%;--ty:50%;
  visibility:hidden;opacity:0;transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);
  background:#fff;border:1px solid #141414;border-radius:8px;padding:9px 13px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:5px;
  filter:drop-shadow(0 2px 6px rgba(20,20,20,.14))}
.pin .chip.on{visibility:visible;opacity:1;--cs:1}
.pin.hot .chip{visibility:visible;opacity:1;--cs:1.06}
.pin.hot{z-index:1000}
@media (hover:hover){.pin:hover{z-index:1000}}
.pin .chip small{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#141414;line-height:1.1}
.pin .chip .markslot{display:block;line-height:0}
.pin .chip .markslot canvas{display:block}
/* the tail */
.pin .chip::before,.pin .chip::after{content:"";position:absolute;width:0;height:0;border:9px solid transparent}
.pin .chip[data-dir="up"]::before{left:var(--tx);top:100%;transform:translateX(-50%);border-top-color:#141414;border-bottom:0}
.pin .chip[data-dir="up"]::after{left:var(--tx);top:calc(100% - 1.5px);transform:translateX(-50%);border-top-color:#fff;border-bottom:0}
.pin .chip[data-dir="down"]::before{left:var(--tx);bottom:100%;transform:translateX(-50%);border-bottom-color:#141414;border-top:0}
.pin .chip[data-dir="down"]::after{left:var(--tx);bottom:calc(100% - 1.5px);transform:translateX(-50%);border-bottom-color:#fff;border-top:0}
.pin .chip[data-dir="left"]::before{top:var(--ty);left:100%;transform:translateY(-50%);border-left-color:#141414;border-right:0}
.pin .chip[data-dir="left"]::after{top:var(--ty);left:calc(100% - 1.5px);transform:translateY(-50%);border-left-color:#fff;border-right:0}
.pin .chip[data-dir="right"]::before{top:var(--ty);right:100%;transform:translateY(-50%);border-right-color:#141414;border-left:0}
.pin .chip[data-dir="right"]::after{top:var(--ty);right:calc(100% - 1.5px);transform:translateY(-50%);border-right-color:#fff;border-left:0}