/* ==========================================================================
   assets/phone/phone.css — the phone field (assets/phone/phone.js)

     1 · the field      country button · slot layer over the input · tick
     2 · the country list — the ANCHORED PANEL (owner's pick, 2026-10-03,
         option 3 of /hero-country/; it replaced the 2026-10-02 docked panel):
         a light white panel 6px under the field, on the field's own two
         edges, lying over what is below. Nothing moves; nothing is outlined
         in blue.
     3 · how it sits in each form — field and panel take that form's own look:
         3a  Contact Us + the Live Proof popup   (.px-f)
         3b  Careers                             (#apply .af-pre)
         3c  homepage audit drawer, desktop      (.tr-field)
         3d  homepage audit wells, phones        (.as-row) — the approved demo

   Structure:  .ph  >  .ph-row (the field)  +  .ph-pop (the panel, when open)

   THE ANCHORED PANEL, in every form
     · same left edge and right edge as the field's box, 6px under it; the
       field keeps its own shape and size while it is open;
     · white, one neutral hairline, a very light shadow; it lies over what is
       below (the form and the page do not move) and stops at a set height —
       four and a half rows — scrolling inside; the last row fades;
     · the search is the one pale box on it; the row in hand is a pale tint;
     · while it is open the field takes no ring, only its code turns to the
       accent with the chevron up, and its empty slots step back;
     · the search holds the cursor from the moment it opens; the magnifier
       stands in the flags' column so what is typed lines up with the names;
     · it appears with a short fade and a 4px rise, and closes at once.

   Colours, radii, heights and type are the ones each form already uses; the
   only new colour is the site's own green (--g-green) for the valid tick.
   ========================================================================== */

/* country flags on Windows, where the system font has none. Declared for
   everyone, downloaded only where phone.js finds flags missing (it adds
   .ph-flagfont to <html>). Twemoji flag art, CC-BY 4.0 — see README.md. */
@font-face{
  font-family:"Twemoji Country Flags"; font-display:swap;
  src:url("TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

/* ==========================================================================
   1 · THE FIELD
   ========================================================================== */
.ph{
  --ph-x:#A7AEB9;          /* a free slot */
  --ph-next:#6B7686;       /* the slot the next digit goes into, while typing */
  --ph-ok:#188038;         /* valid */
  --ph-bad:#D93025;        /* complete, but not a real number */
  --ph-accent:#1A73E8;
  --ph-ink:#0B1220;
  --ph-rule:transparent;   /* the line between the country and the number */
  --ph-plate:transparent;  /* the ground under the country */
  --ph-r:10px;             /* the field's corners */
  --ph-pad:11px;           /* between the country and the first slot */
  /* the anchored panel (section 2) */
  --ph-gap:6px;            /* between the field's box and the panel */
  --ph-pr:12px;            /* the panel's corners */
  --ph-pp:6px;             /* the panel's inner margin */
  --ph-panel:#fff;         /* its ground */
  --ph-panel-edge:#DCE4F0; /* its hairline */
  --ph-panel-sh:0 2px 6px -2px rgba(16, 42, 90, .07), 0 14px 30px -14px rgba(16, 42, 90, .22);
  --ph-search:#F2F5FB;     /* the search box on it */
  --ph-row-tint:#F2F5FB;   /* the row in hand */
  --ph-rows:4.5;           /* rows in view before it scrolls */
  --ph-fs:16px;            /* list type */
  --ph-oh:48px;            /* one country */
  --ph-sh:46px;            /* the search */
  position:relative; display:block; box-sizing:border-box;
  width:100%; min-width:0; margin:0; padding:0; border:0; text-align:left; cursor:auto;
}
/* contact/_shell.css has a class of its own called .ph (a dotted underline and
   a help cursor for placeholder facts); it must not reach this field */
span.ph{ border:0; cursor:auto; }
.ph *, .ph *::before, .ph *::after{ box-sizing:border-box; }
.ph .ph-row{ position:relative; display:flex; align-items:stretch; width:100%; min-width:0; }

/* ---- the country: flag, dial code, chevron ---- */
.ph .ph-cc{
  flex:none; display:inline-flex; align-items:center; justify-content:flex-start; gap:6px;
  width:auto; height:auto; min-width:0; min-height:0; margin:0; padding:0 9px 0 12px;
  border:0; border-right:1px solid var(--ph-rule); border-radius:calc(var(--ph-r) - 1px) 0 0 calc(var(--ph-r) - 1px);
  background:var(--ph-plate); box-shadow:none; color:inherit;
  font:inherit; font-weight:600; letter-spacing:0; line-height:1; text-transform:none; white-space:nowrap;
  cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease, color .16s ease;
}
.ph .ph-cc:focus-visible{ outline:2px solid var(--ph-accent); outline-offset:-2px; }
.ph .ph-cc:disabled{ cursor:default; opacity:.55; }
.ph-flag{
  flex:none; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size:1.22em; font-weight:400; font-style:normal; line-height:1;
}
.ph-flagfont .ph-flag{ font-family:"Twemoji Country Flags", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ph .ph-dial{ font-variant-numeric:tabular-nums; }
.ph .ph-chev{ flex:none; display:block; width:11px; height:11px; margin-left:-1px; opacity:.6; transition:transform .2s ease, opacity .2s ease; }

/* ---- the number: one real input, with the slot layer set over it ---- */
.ph .ph-in{ position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; }
.ph .ph-in > input.ph-tel{
  flex:1 1 auto; align-self:stretch; width:100%; min-width:0; height:auto;
  margin:0 !important; padding:0 2px 0 var(--ph-pad);
  border:0 !important; border-radius:0 !important; outline:0 !important;
  background:transparent !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
}
/* phone.js copies the input's font on to this layer, so both set type alike:
   .ph-t is what has been typed (kept invisible — it only holds the width),
   .ph-x is one free slot, exactly as wide as one digit */
.ph .ph-ghost{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; overflow:hidden;
  margin:0; padding:0; white-space:pre; line-height:normal; color:var(--ph-x);
  font-variant-numeric:tabular-nums; pointer-events:none; -webkit-user-select:none; user-select:none;
  transition:opacity .2s ease;
}
.ph .ph-ghost > span{ flex:none; }
.ph .ph-ghost > .ph-t{ visibility:hidden; }
.ph .ph-ghost .ph-x{ display:inline-block; width:var(--ph-w, auto); text-align:center; letter-spacing:0; }
.ph[data-focus] .ph-ghost .ph-x:first-child{ color:var(--ph-next); }
.ph .ph-probe{ position:absolute; left:0; top:0; visibility:hidden; }

/* ---- the mark at the far right: the tick, only for a valid number ---- */
.ph .ph-mark{
  flex:none; display:flex; align-items:center; justify-content:center; width:34px; padding-right:4px;
  color:var(--ph-ok); pointer-events:none;
}
.ph .ph-mark svg{ display:block; width:18px; height:18px; }
.ph[data-state="invalid"] .ph-mark{ color:var(--ph-bad); }
.ph[data-state="valid"] .ph-mark svg{ animation:phTick .24s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes phTick{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }

.ph .ph-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* a narrow field, or a long number: phone.js sets data-tight when the slots would not fit */
.ph[data-tight] .ph-cc{ gap:4px; padding:0 6px 0 8px; }
.ph[data-tight]{ --ph-pad:7px; }
.ph[data-tight] .ph-mark{ width:26px; padding-right:3px; }
.ph[data-tight] .ph-mark svg{ width:16px; height:16px; }

/* ==========================================================================
   2 · THE ANCHORED PANEL
   ========================================================================== */
/* the field, while its panel is open: same shape and size */
.ph[data-open] .ph-cc{ color:var(--ph-accent); }
.ph[data-open] .ph-chev{ opacity:1; transform:rotate(180deg); }
.ph[data-open] .ph-ghost{ opacity:.5; }

/* the panel: under the field's box (.ph, or the box a form names — section 3),
   on its two edges, over what follows */
.ph .ph-pop{
  --ph-ir:max(3px, calc(var(--ph-pr) - var(--ph-pp) - 1px));      /* inner corners: the panel's corners, one margin in */
  display:none; position:absolute; z-index:30; left:0; right:0; top:calc(100% + var(--ph-gap)); bottom:auto;
  width:auto; height:auto; max-width:none; margin:0; padding:var(--ph-pp); overflow:hidden;
  border:1px solid var(--ph-panel-edge); border-radius:var(--ph-pr);
  background:var(--ph-panel); box-shadow:var(--ph-panel-sh); color:var(--ph-ink);
  font:400 var(--ph-fs)/1.3 var(--sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif);
  font-variant-numeric:normal; letter-spacing:normal; text-align:left; text-transform:none; white-space:normal; cursor:default;
}
.ph .ph-pop.ph-on{ display:block; animation:phLift .2s ease-out both; }
@keyframes phLift{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* the search: the one box on the panel in the other tone */
.ph .ph-pop .ph-find{
  position:relative; display:flex; align-items:center; gap:12px; height:var(--ph-sh); margin:0; padding:0 10px 0 6px;
  border:0; border-radius:var(--ph-ir); background:var(--ph-search); color:#6E7C95; cursor:text; transition:color .2s ease;
}
.ph .ph-pop .ph-find:focus-within{ color:var(--ph-accent); }
.ph .ph-pop .ph-find svg{ flex:none; display:block; width:19px; height:19px; margin:0 7px 0 2px; }      /* 28px: the flags' column, on the flags' left edge */
.ph .ph-pop input.ph-q{
  flex:1 1 auto !important; width:100% !important; min-width:0 !important; height:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; outline:0 !important;
  background:transparent !important; box-shadow:none !important;
  font:inherit !important; font-size:max(16px, var(--ph-fs)) !important; font-weight:500 !important; letter-spacing:-.005em !important;
  color:var(--ph-ink) !important; caret-color:var(--ph-accent); -webkit-appearance:none; appearance:none;
}
.ph .ph-pop input.ph-q::placeholder{ color:#7C8AA5; opacity:1; font-weight:400; }

/* the countries: no rules between rows; four and a half in view, the last one fading */
.ph .ph-pop .ph-list{
  position:relative; list-style:none; margin:4px 0 0; padding:0; max-height:calc(var(--ph-oh) * var(--ph-rows));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent); mask-image:linear-gradient(#000 calc(100% - 22px), transparent);
}
.ph .ph-pop .ph-list::-webkit-scrollbar{ display:none; }
.ph .ph-pop .ph-list[hidden], .ph .ph-pop .ph-none[hidden]{ display:none; }
.ph .ph-pop .ph-opt{
  position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; min-height:var(--ph-oh); margin:0; padding:0 10px 0 6px;
  list-style:none; background:transparent; color:var(--ph-ink);
  font-size:var(--ph-fs); font-weight:500; letter-spacing:-.005em; line-height:1.3; cursor:pointer;
}
.ph .ph-pop .ph-opt::marker{ content:none; }
/* the row in hand (the one Enter takes): a tint, smaller than a field so it is never read as one */
.ph .ph-pop .ph-opt.is-on::before{ content:""; position:absolute; z-index:-1; inset:3px 0; border-radius:var(--ph-ir); background:var(--ph-row-tint); }
.ph .ph-pop .ph-opt .ph-flag{ width:28px; font-size:1.34em; text-align:left; }
.ph .ph-pop .ph-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph .ph-pop .ph-code{ flex:none; order:2; font-size:.94em; font-weight:400; color:#5A6A85; font-variant-numeric:tabular-nums; }
/* the chosen country: heavier, and ticked — not told by colour alone */
.ph .ph-pop .ph-opt[aria-selected="true"] .ph-name{ font-weight:700; }
.ph .ph-pop .ph-opt[aria-selected="true"]::after{
  content:""; flex:none; order:1; width:16px; height:16px; background:var(--ph-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph .ph-pop .ph-none{ margin:0; padding:16px 10px 22px 8px; color:#5A6A85; font-size:.94em; line-height:1.4; }

@media (prefers-reduced-motion:reduce){
  .ph[data-state="valid"] .ph-mark svg, .ph .ph-pop.ph-on{ animation:none; }
  .ph .ph-chev, .ph .ph-cc, .ph .ph-ghost{ transition:none; }
}

/* ==========================================================================
   3a · CONTACT US and the LIVE PROOF popup — the .px-f field: 44px, 10px
   corners, a pale ground with one hairline; white with a blue edge on focus.
   The panel is white with a light hairline; its search is the field's pale tint.
   ========================================================================== */
.px-f .ph{
  --ph-x:var(--ink-4, #A7AEB9); --ph-accent:var(--accent, #1A73E8); --ph-ink:var(--ink, #0B0D12);
  --ph-rule:var(--eg-edge-control, #D2DAE5); --ph-r:var(--eg-r-control, 10px); --ph-pp:5px; --ph-pr:12px;
  --ph-panel:#fff; --ph-panel-edge:#DCE3EE;
  --ph-search:var(--tint, #F6F8FC); --ph-row-tint:#EEF2F8; --ph-fs:15px; --ph-oh:46px; --ph-sh:42px;
  margin-top:7px; color:var(--ink, #0B0D12); font-size:15px;
}
/* in the Live Proof popup the panel ends inside the popup's own content (over
   company, services and the button), so the popup's edge never cuts it */
.pw-dlg .px-f .ph{ --ph-rows:3.5; }
.px-f .ph .ph-row{
  height:44px; border:1px solid var(--eg-edge-control, #D2DAE5); border-radius:var(--ph-r);
  background:var(--tint, #F6F8FC);
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, border-radius .16s ease;
}
.px-f .ph .ph-row:hover{ border-color:var(--eg-edge-hover, #BAC5D4); }
.px-f .ph .ph-row:focus-within{ background:#fff; border-color:var(--ph-accent); box-shadow:0 0 0 3px rgba(26, 115, 232, .13); }
/* open: the field keeps its look, with no ring and no blue edge — the panel has the cursor */
.px-f .ph[data-open] .ph-row, .px-f .ph[data-open] .ph-row:focus-within{
  background:var(--tint, #F6F8FC); border-color:var(--eg-edge-control, #D2DAE5); box-shadow:none;
}
.px-f .ph[data-invalid] .ph-row{ border-color:#D93025; }
.px-f .ph .ph-cc{ color:var(--ink-2, #3A414C); font-size:14.5px; }
.px-f .ph:not([data-open]) .ph-cc:hover{ background:rgba(26, 115, 232, .06); }
.px-f .ph[data-open] .ph-cc{ color:var(--ph-accent); }
.px-f .ph .ph-in > input.ph-tel{ font:inherit; font-size:15px; color:inherit; padding:0 2px 0 var(--ph-pad); }

/* ==========================================================================
   3b · CAREERS — the .af-pre field: 52px, white, one hairline, with the pale
   blue plate the "+91" used to stand on. The panel is white with a lighter
   hairline; its search is pale.
   ========================================================================== */
#apply .af-pre > .ph{
  --ph-x:#8A95A5; --ph-next:#5E6A7B; --ph-ok:var(--cr-ok, #167C4A); --ph-bad:var(--cr-err, #B42318);
  --ph-accent:var(--cr-act, #0760C6); --ph-ink:var(--cr-ink, #0E1E35);
  --ph-rule:#AFBCCD; --ph-plate:#EEF4FC; --ph-r:var(--cr-rk, 10px); --ph-pad:13px; --ph-pp:6px; --ph-pr:12px;
  --ph-panel:#fff; --ph-panel-edge:#D3DCE8;
  --ph-search:var(--cr-pale, #F3F7FC); --ph-row-tint:var(--cr-soft, #EAF2FD); --ph-fs:16px; --ph-oh:48px; --ph-sh:44px;
  /* the page styles ".af-pre > span" as the old "+91" plate; this span is the whole field, so each of those is put back */
  display:block; flex:1 1 auto; place-items:normal; min-width:0; padding:0; border:0; border-radius:0; background:none;
  color:var(--cr-ink, #0E1E35); font-size:16px; font-weight:400;
}
#apply .af-pre > .ph .ph-row{
  height:52px; border:1px solid #AFBCCD; border-radius:var(--ph-r); background:#fff;
  transition:border-color .15s, box-shadow .15s, border-radius .15s;
}
#apply .af-pre > .ph .ph-row:hover{ border-color:var(--cr-ctl-h, #AEBBCC); }
#apply .af-pre > .ph .ph-row:focus-within{ border-color:var(--cr-focus, #1A73E8); box-shadow:0 0 0 3px rgba(26, 115, 232, .18); }
#apply .af-pre > .ph[data-open] .ph-row, #apply .af-pre > .ph[data-open] .ph-row:focus-within{ border-color:#AFBCCD; box-shadow:none; }
#apply .af-f.is-bad .af-pre > .ph .ph-row, #apply .af-pre > .ph[data-invalid] .ph-row{ border-color:var(--cr-err, #B42318); }
#apply .af-f.is-bad .af-pre > .ph, #apply .af-pre > .ph[data-invalid]{ --ph-rule:var(--cr-err, #B42318); }
#apply .af-f.is-bad .af-pre > .ph:not([data-open]) .ph-row:focus-within{ box-shadow:0 0 0 3px rgba(180, 35, 24, .14); }
#apply .af-pre > .ph .ph-cc{ padding:0 10px 0 12px; color:#15335C; font-size:15.5px; font-weight:750; }
#apply .af-pre > .ph:not([data-open]) .ph-cc:hover{ background:#E3EDFA; }
#apply .af-pre > .ph[data-open] .ph-cc{ color:var(--ph-accent); }
#apply .af-pre > .ph .ph-in > input.ph-tel{ height:auto; padding:0 2px 0 var(--ph-pad); font-size:16px; line-height:1.4; color:inherit; }

/* ==========================================================================
   3c · HOMEPAGE AUDIT, DESKTOP — inside the drawer's white .tr-field (the
   label is the box). Since 2026-10-03 the field's live look comes from
   desktop-parity/hero.css (soft pale wells in one white field), which also
   colours this panel; the rules below written "html body #hx.hx …" are one
   step stronger than that file, so the panel is the same as every other
   form's: white, a light hairline, a pale search.
   ========================================================================== */
#hx form#hxForm .tr-field > .ph{
  --ph-x:#8391A5; --ph-next:#5A6678; --ph-accent:#0A66C2; --ph-ink:#031D40; --ph-plate:var(--field, #EAF1FB); --ph-pad:11px;
  --ph-r:8px; --ph-pp:5px; --ph-gap:7px;
  --ph-fs:16px; --ph-oh:42px; --ph-sh:42px;
  align-self:flex-start; flex:1 1 0; width:auto; color:#031D40; font-size:16px;
}
#hx form#hxForm .tr-field > .ph .ph-row{ height:44px; }
#hx form#hxForm .tr-field > .ph .ph-cc{
  flex:none; display:inline-flex; gap:5px; height:44px; padding:0 8px 0 10px; border:0; border-radius:5px;
  background:var(--ph-plate); color:#3B4A60;
  font:500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:0;
  transition:background-color .16s ease, color .16s ease;
}
#hx form#hxForm .tr-field > .ph:not([data-open]) .ph-cc:hover{ background:#DDE8F8; }
#hx form#hxForm .tr-field > .ph[data-open] .ph-cc{ color:var(--ph-accent); }
#hx form#hxForm .tr-field > .ph .ph-flag{ font-size:17px; }
#hx form#hxForm .tr-field > .ph .ph-in > input.ph-tel{ flex:1 1 auto; width:100%; height:44px; padding:0 2px 0 var(--ph-pad); font-size:16px; color:#031D40; }
#hx form#hxForm .tr-field > .ph .ph-mark{ width:30px; padding-right:2px; }
/* the number needs more room than the name; below ~960px the two fields keep
   the first row and the button takes a row of its own. */
#hx form#hxForm .tr-tray.tr-has-tel{ align-items:flex-start; }
#hx form#hxForm .tr-tray.tr-has-tel .tr-field{ min-width:124px; }
#hx form#hxForm .tr-tray.tr-has-tel .tr-field.tr-tel{ flex:1.35 1 0; min-width:252px; }
html body #hx.hx form#hxForm .tr-field > .ph{
  --ph-pr:12px; --ph-panel:#fff; --ph-panel-edge:#DCE4F0; --ph-search:#F2F5FB; --ph-row-tint:#F2F5FB;
}
/* open: the well keeps its size, place and corners (its box is drawn by
   ::before, as before, now all the way round) and stands above the row
   beneath; the panel lies 6px under it, on the label's own two edges, over
   that row. The field and the page do not move. */
#hx form#hxForm .tr-field.tr-tel.ph-open{
  position:relative; z-index:31; height:54px; align-items:center; border-color:transparent; background:transparent;
}
#hx form#hxForm .tr-field.tr-tel.ph-open::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px;
  border:1px solid #D7E2F3; border-radius:8px; background:#fff;
}
html body #hx.hx form#hxForm .tr-field.tr-tel.ph-open::before{ height:auto; border-radius:10px; }
#hx form#hxForm .tr-field.tr-tel.ph-open > .ph{ position:static; }
#hx form#hxForm .tr-field.tr-tel.ph-open > .ph .ph-row{ position:relative; z-index:1; }
#hx form#hxForm .tr-field.tr-tel > .ph .ph-pop{ left:-1px; right:-1px; }
/* the drawer clips its corners while it opens; with a list open it lets the panel out */
#hx form#hxForm.tr-open:has(.ph[data-open]){ overflow:visible; }
@media (max-width:960px) and (min-width:621px){
  #hx form#hxForm .tr-tray.tr-has-tel{ flex-wrap:wrap; }
  #hx form#hxForm .tr-tray.tr-has-tel button.tr-go{ flex:1 1 100%; }
}
@media (max-width:620px){
  #hx form#hxForm .tr-tray.tr-has-tel .tr-field, #hx form#hxForm .tr-tray.tr-has-tel .tr-field.tr-tel{ flex:none; min-width:0; }
}

/* ==========================================================================
   3d · HOMEPAGE AUDIT, PHONES ("Straddle") — inside the soft .as-row well
   (the label is the box: pale, 14px corners, no line). This is the demo the
   owner approved for the phone field. The well keeps its size and corners
   while open; the panel lies 6px under it, white with a light hairline,
   over "What are you looking for?" and the key.
   ========================================================================== */
#hx form#hxForm .as-row > .ph{
  --ph-x:#7C8AA5; --ph-next:#4A5A75; --ph-accent:var(--brand, #0760C6); --ph-ink:var(--ink, #0E1E35); --ph-bad:#D14343; --ph-pad:9px;
  --ph-r:14px; --ph-pp:6px; --ph-pr:14px; --ph-panel:#fff; --ph-panel-edge:#DCE4F0; --ph-search:#F2F5FB; --ph-row-tint:#F2F5FB;
  --ph-fs:16.5px; --ph-oh:46px; --ph-sh:46px;
  align-self:stretch; flex:1 1 0; width:auto; height:auto; font-size:17px; color:var(--ink);
}
#hx form#hxForm .as-row > .ph .ph-row{ height:54px; }
#hx form#hxForm .as-row > .ph .ph-cc{
  flex:none; display:inline-flex; gap:5px; width:auto; height:auto; margin:0 0 0 -4px; padding:0 4px;
  border:0; border-radius:8px; background:transparent; box-shadow:none; color:#4A5A75;
  font-size:17px; font-weight:400; letter-spacing:0;
}
#hx form#hxForm .as-row > .ph[data-open] .ph-cc{ color:var(--ph-accent); }
#hx form#hxForm .as-row > .ph .ph-chev{ width:12px; height:12px; }
#hx form#hxForm .as-row > .ph .ph-flag{ font-size:19px; }
#hx form#hxForm .as-row > .ph .ph-in > input.ph-tel{ flex:1 1 auto; width:100%; height:100%; padding:0 2px 0 var(--ph-pad); }
#hx form#hxForm .as-row > .ph .ph-mark{ width:26px; padding-right:0; justify-content:flex-end; }
#hx form#hxForm .as-row > .ph .ph-mark svg{ width:19px; height:19px; }
/* the form's own red mark (.as-bad-i) takes over when a submit finds the number wrong */
#hx form#hxForm .as-row.is-bad > .ph .ph-mark{ display:none; }
/* open: the well keeps its size, place, tone and corners, with no focus line
   (the search has the cursor); the panel lies 6px under it, on the well's
   own two edges, above the fields and the key below */
#hx form#hxForm .as-row.ph-open, #hx form#hxForm .as-row.ph-open:focus-within{
  position:relative; height:54px; align-items:center; overflow:visible; background:#F2F5FB; box-shadow:none;
}
#hx form#hxForm .as-row.ph-open > .ph{ position:static; }
#hx form#hxForm .as-row > .ph .ph-pop{ z-index:40; left:0; right:0; }
#hx form#hxForm .as-row > .ph .ph-pop input.ph-q{ font-size:17px !important; }
#hx form#hxForm .as-row > .ph .ph-pop .ph-flag{ font-size:22px; }
#hx form#hxForm .as-row > .ph .ph-pop .ph-code{ font-size:15.5px; }
@media (max-width:350px){
  #hx form#hxForm .as-row > .ph{ font-size:16px; --ph-pad:7px; --ph-fs:15.5px; }
  #hx form#hxForm .as-row > .ph .ph-cc{ font-size:16px; }
  /* a little less inner margin, so "United Arab Emirates" keeps its whole name */
  #hx form#hxForm .as-row > .ph .ph-pop .ph-opt{ gap:9px; padding-left:4px; padding-right:8px; }
  #hx form#hxForm .as-row > .ph .ph-pop .ph-opt .ph-flag{ width:25px; }
}