/* The country beside a phone-number field (see phone.js). Markup:

     <div class="phone" data-phone>
       <span class="phone-cc">
         <select id="phone-country" aria-label="Country" autocomplete="tel-country-code">…</select>
         <span class="phone-cc-face" aria-hidden="true">
           <span class="phone-flag" data-phone-flag>🇺🇸</span><span class="phone-dial" data-phone-dial>+1</span>
         </span>
       </span>
       <input id="phone" type="tel" …>
     </div>

   What is seen is the face: a flag, the code and a small arrow. What is used is a real <select> laid
   invisibly over it, so a phone opens its own country picker and a keyboard or screen reader gets an
   ordinary list. The first block below is how that works and should survive any restyle; the second is
   only looks, drawn from the page's own --ink and --faint, and is the part to change. */

/* How it works */
.phone { display: flex; align-items: flex-end; gap: var(--phone-gap, 0.9em); }
.phone > input[type="tel"] { flex: 1 1 0; width: auto; min-width: 0; }
.phone-cc { position: relative; flex: none; display: block; }
.phone-cc select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; border: 0; padding: 0;
  opacity: 0;
  appearance: none; -webkit-appearance: none;
  font: inherit;
  font-size: max(1em, 16px); /* under 16px an iPhone zooms the page when the list opens */
  cursor: pointer;
}
.phone-cc-face { display: flex; align-items: baseline; white-space: nowrap; }
/* Fixed widths: every country takes the same room, so nothing moves when the guessed one is filled in
   or another is picked. The flag is a picture where the system has them and two letters where it doesn't. */
.phone-flag { display: inline-block; min-width: 1.5em; line-height: 1; font-size: 1.15em; position: relative; top: 0.1em; }
.phone-dial { display: inline-block; min-width: 4ch; }

/* How it looks: a fill-in line like the number's own, on the same typewriter. */
.phone-cc-face {
  gap: 0.4em;
  padding: 0.1em 0.1em 0.25em;
  border-bottom: 1.5px solid var(--ink, currentColor);
  color: var(--ink, inherit);
}
.phone-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.phone-cc-face::after {
  content: "";
  align-self: center;
  width: 0.5em; height: 0.3em;
  background: var(--faint, currentColor);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* The line under whichever half has the focus thickens, as the page's other lines do; the padding gives
   the extra pixel back, so neither half moves against the other. */
.phone-cc select:focus + .phone-cc-face { border-bottom-width: 2.5px; padding-bottom: calc(0.25em - 1px); }
.phone > input[type="tel"]:focus { padding-bottom: calc(0.25em - 1px); }
.phone-cc select:focus-visible + .phone-cc-face { outline: 2px solid var(--ink, currentColor); outline-offset: 3px; }