/*
 * Privacy mode (assets/scripts/privacy-mode.js): every element marked `data-private`
 * shows a row of dots instead of its figure.
 *
 * The original text stays in the DOM and only its glyphs turn transparent, so live price
 * updates keep writing into the element and the mask holds without any script having to
 * know about privacy mode.
 */
html.privacy-mode [data-private] {
  position: relative;
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  user-select: none;
}

html.privacy-mode [data-private] * {
  visibility: hidden;
}

/*
 * An inline element is exactly as wide as its number, which would give away the order of
 * magnitude. A fixed box hides that; block elements already take their container's width.
 * No overflow clipping: an inline-block that clips loses its text baseline and drops below
 * the line, and the transparent overflow takes no space anyway.
 */
html.privacy-mode span[data-private] {
  display: inline-block;
  width: min(2.6em, 4.5rem);
  max-width: 100%;
}

/*
 * The dots are drawn a bit smaller than the text and centred on it, with a cap: at full size
 * the dashboard's hero figure turns into a row of coins. They keep the element's colour,
 * weight and alignment.
 */
html.privacy-mode [data-private]::after {
  content: "••••";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  font-size: min(0.75em, 1.5rem);
  line-height: 1;
  letter-spacing: 0.1em;
  -webkit-text-fill-color: currentColor;
  text-align: inherit;
}

html.privacy-mode span[data-private]::after {
  text-align: left;
}

/* Header toggle: the same round button as the notification bell next to it. */
.profile-and-actions .navbar-privacy-button {
  cursor: pointer;
  padding: 0;
}

html.privacy-mode .profile-and-actions .navbar-privacy-button {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

html.privacy-mode .profile-and-actions .navbar-privacy-button i {
  color: var(--color-white);
}