/* Country awareness: the country of a number (flag + name), how it will be dialled, the time there. */

/* flag + name. The flag is an emoji; systems without flag glyphs (Windows) show its two letters instead, so it is
   set in the UI font at a size where both read well. */
.ctry { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ctry-f { font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--sans); font-size: .95em; letter-spacing: .04em; flex: none; }
.ctry-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dialer: one row under the number field shared by the contact match and the country chip (no height change while typing) */
.num-info { display: flex; align-items: center; gap: 10px; min-height: 19px; min-width: 0; }
.num-info .num-match { flex: none; max-width: 55%; overflow: hidden; }
.num-info .num-match:empty { display: none; }
.num-ctry { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ctry-chip { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; }
.ctry-chip .ctry-n { color: var(--ink); }
.ctry-dial { color: var(--ink-2); white-space: pre; }
.ctry-dial .num { color: var(--ink); }

/* call card and lead card: "United Kingdom · 3:05 PM there" */
.where { display: inline-flex; align-items: baseline; flex-wrap: wrap; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.where-t { white-space: pre; }
.where-clock { color: var(--ink); font-weight: 500; }
.call-where { min-height: 0; margin-top: 2px; }
.call-where:empty { display: none; }
.cl-where { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); font-size: var(--fs-sm); }

/* admin: the country a line calls from */
.line-ctry { display: inline-flex; align-items: baseline; gap: 6px; }