/* Balloons: a body (icon and name, or the balloon's own HTML) on a shape drawn by balloon-look.js,
   whose tip sits on the balloon's point. JS sets translate(x, y) on .balloon to that point, and
   balloon-look.js places the body around it (the tail can be on any side).
   The look comes from CSS variables (balloon-look.js): --bal-k size, --bal-f text size, --bal-font,
   --bal-weight, --bal-fg text colour, --bal-ic icon colour. */
@font-face { font-family: Vazirmatn; src: url("/shared/fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url("/shared/fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url("/shared/fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("/shared/fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.balloon {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; pointer-events: none; cursor: pointer;
  opacity: 0; transition: opacity 0.25s; --bal-fs: 17px; -webkit-tap-highlight-color: transparent;
}
.balloon.shown { opacity: 1; pointer-events: auto; }
.balloon-body {
  position: absolute; left: 0; top: 0; transform-origin: var(--bal-ox, 50%) var(--bal-oy, 100%);
  display: flex; align-items: center; gap: calc(6px * var(--bal-k, 1));
  padding: calc(13px * var(--bal-k, 1)) calc(31px * var(--bal-k, 1)) calc(13px * var(--bal-k, 1)) calc(26px * var(--bal-k, 1));
  color: var(--bal-fg, #252525); font-family: var(--bal-font, Manrope), system-ui, sans-serif; font-weight: var(--bal-weight, 400);
  font-size: calc(var(--bal-fs) * var(--bal-f, 1)); line-height: 1; white-space: nowrap;
  transition: transform 0.15s var(--ease-quick, ease-out);
}
.balloon.no-icon .balloon-body { padding-left: calc(28px * var(--bal-k, 1)); padding-right: calc(28px * var(--bal-k, 1)); }
/* As wide as its content (the HTML caps itself at about a third of the screen), not squeezed by the 0-wide balloon. */
.balloon.is-html .balloon-body { padding: calc(10px * var(--bal-k, 1)); white-space: normal; width: max-content; }
.balloon.shape-plain .balloon-body { padding: 0; }
/* Big enough to tap even when the balloon is small (44 × 44 at least). */
.balloon-body::before {
  content: ""; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
}
.balloon-bg {
  position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
}
.balloon-bg svg { position: absolute; left: 0; top: 0; overflow: visible; }
.balloon-icon {
  position: relative; display: block; flex: none; width: calc(24px * var(--bal-k, 1)); height: calc(24px * var(--bal-k, 1));
  background: var(--bal-ic, #252525); -webkit-mask: var(--bal-icon) center / contain no-repeat; mask: var(--bal-icon) center / contain no-repeat;
}
.balloon-name, .balloon-html { position: relative; }
.balloon-html { display: block; }
.balloon:hover .balloon-body, .balloon:focus-visible .balloon-body { transform: scale(1.04); }
/* No frame under the text: a soft shadow keeps it readable on the picture. */
.balloon.shape-underline .balloon-body { padding-bottom: calc(8px * var(--bal-k, 1)); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

@media (max-width: 600px) {
  .balloon { --bal-fs: 14px; }
  .balloon-body { padding: calc(9px * var(--bal-k, 1)) calc(18px * var(--bal-k, 1)) calc(9px * var(--bal-k, 1)) calc(14px * var(--bal-k, 1)); }
  .balloon.no-icon .balloon-body { padding-left: calc(16px * var(--bal-k, 1)); padding-right: calc(16px * var(--bal-k, 1)); }
  .balloon-icon { width: calc(20px * var(--bal-k, 1)); height: calc(20px * var(--bal-k, 1)); }
}
html.mobile .balloon { --bal-fs: 15px; }
html.mobile .balloon-body { padding: calc(10px * var(--bal-k, 1)) calc(18px * var(--bal-k, 1)) calc(10px * var(--bal-k, 1)) calc(14px * var(--bal-k, 1)); }
html.mobile .balloon.no-icon .balloon-body { padding-left: calc(16px * var(--bal-k, 1)); padding-right: calc(16px * var(--bal-k, 1)); }
html.mobile .balloon-icon { width: calc(18px * var(--bal-k, 1)); height: calc(18px * var(--bal-k, 1)); }
html.mobile .balloon.is-html .balloon-body, .balloon.is-html .balloon-body { padding: calc(10px * var(--bal-k, 1)); }
.balloon.shape-plain .balloon-body, html.mobile .balloon.shape-plain .balloon-body { padding: 0; }