/* ==========================================================================
   PHONE FIELD
   The country-code picker used by every form that asks for a number, on the
   marketing site and inside the portal. Linked from app/layout.tsx rather
   than head-manifest.ts, because the portal pages are standalone and never
   load forms.css.

   Closed, the control shows the flag and the dial code only. The country name
   belongs in the list, where it is being read, not in a 48px box where it
   crowds out the number beside it.

   Tokens resolve against whichever stylesheet is present: forms.css on the
   site, portal-app.css in the portal, literals if neither.
   ========================================================================== */

.phone-input-group {
  --pcc-ink: var(--form-ink, var(--portal-ink, #26503c));
  --pcc-line: var(--border-control, var(--portal-line, rgba(38, 80, 60, 0.28)));
  --pcc-muted: var(--form-muted, var(--portal-muted, rgba(38, 80, 60, 0.68)));
  --pcc-surface: #fff;
  --pcc-radius: 7px;

  display: grid;
  grid-template-columns: minmax(104px, 0.4fr) minmax(150px, 1fr);
  gap: 10px;
  min-width: 0;
}

/* The picker is the positioning context for its popup. */
.phone-cc {
  position: relative;
  min-width: 0;
}

/* Before hydration this is the control; after, it only carries the value. */
.phone-cc__native {
  width: 100%;
}

.phone-cc__button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--pcc-line);
  border-radius: var(--pcc-radius);
  background: var(--pcc-surface);
  color: var(--pcc-ink);
  font: inherit;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.phone-cc__button:hover { border-color: var(--pcc-ink); }

.phone-cc__button:focus-visible {
  border-color: var(--pcc-ink);
  outline: 2px solid var(--pcc-ink);
  outline-offset: 1px;
}

.phone-cc__flag {
  font-size: 19px;
  line-height: 1;
  /* Colour emoji only; never picks up the inherited ink. */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Windows draws no flag glyphs, so the ISO code stands in deliberately. */
.phone-cc__iso {
  padding: 3px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pcc-ink) 10%, transparent);
  color: var(--pcc-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.phone-cc__dial {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.phone-cc__chev {
  flex: none;
  margin-left: auto;
  opacity: 0.55;
}

/* ── The list ─────────────────────────────────────────────────────────────── */

.phone-cc__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 290px);
  max-width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--pcc-line);
  border-radius: var(--pcc-radius);
  background: var(--pcc-surface);
  box-shadow: 0 18px 40px rgb(0 0 0 / 16%);
}

.phone-cc__search {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--pcc-line);
  border-radius: 0;
  background: var(--pcc-surface);
  color: var(--pcc-ink);
  font: inherit;
  font-size: 14px;
}

.phone-cc__search:focus-visible {
  outline: 2px solid var(--pcc-ink);
  outline-offset: -2px;
}

.phone-cc__list {
  max-height: 264px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.phone-cc__option {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 5px;
  cursor: pointer;
}

.phone-cc__option[data-active='true'] {
  background: color-mix(in srgb, var(--pcc-ink) 9%, transparent);
}

.phone-cc__option[aria-selected='true'] .phone-cc__name { font-weight: 650; }

.phone-cc__option .phone-cc__flag,
.phone-cc__option .phone-cc__iso { justify-self: center; }

.phone-cc__name {
  min-width: 0;
  overflow: hidden;
  color: var(--pcc-ink);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-cc__option .phone-cc__dial {
  color: var(--pcc-muted);
  font-size: 13px;
  font-weight: 500;
}

.phone-cc__empty {
  padding: 14px 10px;
  color: var(--pcc-muted);
  font-size: 14px;
}

/* The field blocks on the site clip their children; the popup must escape. */
.field:has(.phone-cc),
label:has(.phone-cc) { overflow: visible; }

@media (max-width: 680px) {
  .phone-input-group { grid-template-columns: minmax(0, 1fr); }
  .phone-cc__pop { width: 100%; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .phone-cc__button { transition: border-color 160ms ease; }
}