/* Readable, keyboard-accessible reveal controls; never expose the value in a tooltip. */
button.private-phone {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 4px 8px; margin: -4px 0; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 4px;
  box-shadow: none;
}
button.private-phone:hover { background: rgba(100, 116, 139, .12); }
button.private-phone:focus-visible { outline: 2px solid #5260ee; outline-offset: 2px; }
/* Inside rows and links: reveal in place without opening the row. */
.private-phone[data-nested] {
  display: inline; padding: 1px 4px; margin: 0 -4px; border-radius: 6px;
  cursor: pointer; font-variant-numeric: tabular-nums;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.private-phone[data-nested]:hover { background: rgba(100, 116, 139, .14); }
/* In list lines the number reveals without changing the row's size: compact box, colour only. */
.sub .private-phone, .faint .private-phone, .muted .private-phone, b .private-phone, .title .private-phone, .chip .private-phone {
  min-height: 0; padding: 0 4px; margin: 0 -4px; line-height: inherit;
}
/* Revealed: colour only (works in light and dark), so nothing moves. */
button.private-phone[aria-pressed="true"], .private-phone.revealed { border-color: transparent; background: var(--accent-weak, #eaedff); color: var(--accent-press, #3646d8); text-decoration: none; }