/* phone widget: inherits the bundle palette through these variables */
.ph { display: flex; align-items: stretch; width: 100%; position: relative; }
.ph-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 12px; font: inherit; font-size: 15px; line-height: 1;
  box-sizing: border-box; height: auto; min-height: 100%;
  background: var(--ph-chip-bg, rgba(0, 0, 0, .06));
  color: var(--ph-fg, inherit);
  border: 0; border-right: 1px solid var(--ph-line, rgba(0, 0, 0, .12));
  border-radius: inherit; cursor: default; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
}
.ph-bare .ph-chip { font-size: 13px; letter-spacing: .04em; }
.ph-flag {
  width: 21px; height: 15px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); flex: none;
}
.ph .ph-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.ph-bad .ph-input { box-shadow: inset 0 0 0 2px var(--ph-bad, #e05252); }