/* Public phone masking. Keep the real number out of all client-side assets. */
.phone-mask {
  position: relative;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: baseline;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.phone-prefix,
.phone-blurred {
  display: inline-block;
}

.phone-blurred {
  filter: blur(2px);
  user-select: none;
}

.phone-mask:hover,
.phone-mask:focus-visible {
  color: #0b55c4;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  outline: none;
}

.phone-mask:hover::after,
.phone-mask:focus-visible::after {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  max-width: min(260px, calc(100vw - 24px));
  padding: 6px 9px;
  border: 1px solid #365e89;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  color: #222;
  content: attr(data-tooltip);
  font: 12px/1.35 Arial, sans-serif;
  text-decoration: none;
  white-space: normal;
}

.phone-mask:focus-visible {
  outline: 2px solid #f2b233;
  outline-offset: 3px;
}

.phone-list .phone-mask {
  display: flex;
  width: fit-content;
  margin: 0 0 4px;
}

@media (max-width: 480px) {
  .phone-mask:hover::after,
  .phone-mask:focus-visible::after {
    left: 50%;
    transform: translateX(-50%);
  }
}