/* SE_PHONE - the one phone field. M258.

   THE RULE THIS SHEET OBEYS: the control must be no bigger and no heavier than the fields it
   sits among, and it must never make the page wider than the screen. So it sets NO font-size,
   NO colour and NO font-weight of its own. It inherits from whichever form it is dropped into,
   which is why the same component looks native inside a booking `.bk-field` and inside an
   account `.acc-field` without either sheet knowing about it.

   The one thing it does set is a hard width ceiling, because a country selector is exactly the
   sort of thing that pushes a page sideways. */

.se-phone {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;          /* without this a flex child refuses to shrink and the row overflows */
    position: relative;
}

/* The real control. It is present, focusable and keyboard-reachable, and on iOS it opens the
   native wheel over the page rather than drawing a list that could hang past the edge. It is
   made transparent rather than hidden, because `display:none` or `visibility:hidden` would take
   it out of the tab order and off the accessibility tree. */
.se-phone-cc {
    flex: 0 0 5.5em;
    width: 5.5em;
    min-width: 0;
    max-width: 5.5em;
    opacity: 0;
    /* The 16px floor in se-chrome applies to `select` and therefore to this element, which is
       the whole reason the country control is a native select. Do NOT set a font-size here. */
}

/* What the member actually reads: the flag and the dial code, drawn over the select and
   ignoring the pointer so every tap lands on the real control underneath. */
.se-phone-shown {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    /* No font-size. It inherits the form's own, so it can never out-size its neighbours. */
}

.se-phone-num {
    flex: 1 1 auto;
    min-width: 0;          /* the other half of the no-overflow guarantee */
    width: 100%;
}

/* A focus ring on the select has to be drawn on the thing the member can see, since the select
   itself is transparent. */
.se-phone-cc:focus-visible + .se-phone-shown {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    border-radius: 6px;
}

@media (max-width: 767px) {
    /* At 320px, which is what a 375px iPhone reports with Display Zoom on, 5.5em of selector
       plus a gap still leaves a usable number box. Narrower than this and the dial code wraps. */
    .se-phone-cc,
    .se-phone-shown { flex-basis: 5em; width: 5em; max-width: 5em; }
}