/* ============================================================================
 * La2etlak — THE SHARED INTERNATIONAL PHONE CONTROL
 * ============================================================================
 * INTERNATIONAL-PHONE-CONTRACT-001 (ledger 69) + the 4C Stage-B UI integration.
 *
 * This is a SHARED COMPONENT OWNER, in the sense report-card.css is: one
 * component rendered by three unrelated families — Registration (4C), the
 * owner's Settings profile save (5H) and the administrator's user edit — which
 * must look and behave like ONE control everywhere. It is NOT a page family and
 * it owns no page.
 *
 * ── WHAT THIS FILE OWNS, AND WHAT IT DELIBERATELY DOES NOT ──────────────────
 * It owns RELATIONSHIP and the two surfaces the native platform cannot style:
 * the row's break behaviour, the label-to-field pairing (4C-C02: each half is a
 * GROUP that owns its own label and its own control, so the two never separate),
 * the enhanced trigger's internal layout, and the custom listbox.
 *
 * It does NOT own the two native controls' own appearance. Their border,
 * height, radius, background and type come from the `fieldClass` the consumer
 * passes — `au-fi` inside the ported Auth shell, `set-fi` inside the ported
 * Settings design, `form-control` on a Bootstrap surface — and the enhancement
 * copies that same class list onto the trigger it builds, so an enhanced
 * control is the same field the un-enhanced one was. That is why there is no
 * colour, border, height or font declaration for `.la2-phone-field__country`
 * or `.la2-phone-field__number` anywhere below.
 *
 * ── NO VIEWPORT MEDIA QUERY DECIDES THE ROW ─────────────────────────────────
 * The control is rendered inside a page gutter, inside an account rail and
 * inside an admin card — three containers that are never as wide as the
 * viewport — and 5H-P01 and 5K-P01 were both a control that overflowed because
 * its width was decided by a viewport breakpoint rather than by the space it
 * actually had. The row breaks on its OWN available width.
 *
 * ── ADMIN ───────────────────────────────────────────────────────────────────
 * Admin assets are fully isolated and do not load this file. `resources/css/
 * admin.css` carries the SAME relationships against the admin token set, in one
 * clearly-marked block. Two stylesheet worlds, one component: keep them in step.
 * ========================================================================== */


/* ============================================================================
 * 1. THE ROW — country selector + national number, one conceptual control
 * ========================================================================== */
.la2-phone-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

/* 4C-C02 — EACH HALF OWNS ITS OWN LABEL AND ITS OWN CONTROL.
   The row's children are the two GROUPS, not the two controls, so a visible
   label always sits directly above the field it names. When the row has room
   the groups stand side by side; when it does not, the whole group wraps and
   the label travels with its control. Two stacked captions over an ambiguous
   pair of controls is the arrangement this replaces. */
.la2-phone-field__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* The selector holds a country name plus a dial code; the number field takes the
   rest. Both may shrink to their own basis and then the row breaks. The basis is
   the GROUP's, so a label can never be left behind by its own control. */
.la2-phone-field__row > .la2-phone-field__group--country { flex: 1 1 13rem; }
.la2-phone-field__row > .la2-phone-field__group--number  { flex: 1 1 11rem; }

.la2-phone-field__country-wrap { position: relative; }

.la2-phone-field__number {
    width: 100%;
    min-width: 0;
}

.la2-phone-field__country { width: 100%; }

.la2-phone-field__label { display: block; }

.la2-phone-field__label--number {
    /* The number's label names the number field beneath it and nothing else.
       Kept as a hook so a consumer can distinguish the two. */
    margin-top: 0;
}

/* A calling code is a machine value with a fixed order. Isolated so RTL bidi
   reordering can never render "+20" as "20+" (FOUNDATION 8). */
.la2-phone-field__code {
    unicode-bidi: isolate;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}


/* ============================================================================
 * 2. THE ENHANCED CONTROL
 * ----------------------------------------------------------------------------
 * PROGRESSIVE ENHANCEMENT, NOT A REPLACEMENT. With no JavaScript the native
 * <select> is the visible, operable control and it submits `phone_country`
 * exactly as it always has. When the shared module runs it hides that select
 * from the pointer, the tab order AND the accessibility tree, and puts an
 * accessible combobox in front of it — but the select remains the form's truth,
 * it is never removed, and every selection is written back to it.
 * ========================================================================== */

/* Enhanced: the native select stops being a focus stop and an AT announcement,
   without leaving the form. `display:none` would be equally valid for
   submission, but keeping it laid out under the trigger means a browser's
   native validation bubble still has somewhere to point. */
.la2-phone-field--enhanced .la2-phone-field__country {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.la2-phone-field__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: start;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.la2-phone-field__trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The dial code never truncates: it is the half of the label that decides which
   country the number will be parsed in. The NAME truncates instead. */
.la2-phone-field__trigger .la2-phone-field__code { flex: none; }

.la2-phone-field__chev {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: .7;
}


/* ============================================================================
 * 3. THE LISTBOX
 * ----------------------------------------------------------------------------
 * The owner requirement this exists for: a browser-native <select> popup cannot
 * be styled consistently across browser/OS combinations, and the OPEN menu has
 * to look like La2etlak. Anatomy from FOUNDATION 5 (one surface, one hairline,
 * one overlay elevation) and 17 (visible focus, 44px targets); no board draws
 * this component, so nothing here is copied from a placeholder.
 * ========================================================================== */
.la2-phone-field__menu {
    position: absolute;
    z-index: 60;
    inset-inline: 0;
    top: calc(100% + 6px);
    display: none;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    box-shadow: var(--sh);
    overflow: hidden;
}

/* Opened UPWARDS when the control sits low in the viewport, so a virtual
   keyboard can never bury the list. The module sets this, never a media query. */
.la2-phone-field__menu[data-drop="up"] { top: auto; bottom: calc(100% + 6px); }

.la2-phone-field--open .la2-phone-field__menu { display: flex; }

.la2-phone-field__search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.la2-phone-field__search-row .ico { flex: none; width: 17px; height: 17px; color: var(--muted); }

.la2-phone-field__search {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14.5px;
    padding: 0;
    outline: none;
}
[dir="rtl"] .la2-phone-field__search { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-phone-field__search::placeholder { color: var(--ph); opacity: 1; }

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

.la2-phone-field__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--body);
    line-height: 1.35;
}

.la2-phone-field__opt-name {
    flex: 1 1 auto;
    min-width: 0;
    /* A long country name WRAPS rather than covering the calling code
       (FOUNDATION 8: wrap to two lines rather than truncating). */
    overflow-wrap: anywhere;
}

.la2-phone-field__opt .la2-phone-field__code { flex: none; color: var(--muted); }

.la2-phone-field__opt:hover { background: var(--band); color: var(--ink); }

/* The filter's result must be VISIBLE, not only announced. `[hidden]` is a UA
   rule, and an AUTHOR `display` declaration beats the UA stylesheet whatever
   its specificity — so `display: flex` above silently defeated it and a
   filtered-out country kept its full 44px row. Measured before the fix: typing
   a country name set the attribute on 244 of 245 options and painted all 245.
   4C-C04. */
.la2-phone-field__opt[hidden] { display: none; }


/* ACTIVE = the keyboard's position in the list. Carries a ground AND a
   logical-start bar, so the position is never signalled by colour alone. */
.la2-phone-field__opt[data-active="true"] {
    background: var(--curFaint);
    color: var(--ink);
    box-shadow: inset 3px 0 0 0 var(--act);
}
[dir="rtl"] .la2-phone-field__opt[data-active="true"] { box-shadow: inset -3px 0 0 0 var(--act); }

/* SELECTED = the value the form holds. Carries weight and a check mark, never
   colour alone. */
.la2-phone-field__opt[aria-selected="true"] { font-weight: 600; color: var(--ink); }
.la2-phone-field__opt[aria-selected="true"] .la2-phone-field__code { color: var(--body); }

.la2-phone-field__tick { flex: none; width: 17px; height: 17px; color: var(--act); visibility: hidden; }
.la2-phone-field__opt[aria-selected="true"] .la2-phone-field__tick { visibility: visible; }

.la2-phone-field__empty {
    padding: 14px 12px;
    font-size: 13.5px;
    color: var(--muted);
}


/* ============================================================================
 * 4. INVALID STATE
 * ----------------------------------------------------------------------------
 * Country and number are ONE conceptual field: a failure on either paints both
 * and is announced once, from the number field's `aria-describedby`. The
 * invalid appearance of the two native controls is the consumer's `is-invalid`
 * / `au-bad` / `set-bad` state; what this file adds is the trigger, which does
 * not exist until the enhancement runs.
 * ========================================================================== */
.la2-phone-field__help {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
}

.la2-phone-field__error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--erI);
    line-height: 1.45;
    margin: 0;
}

.la2-phone-field__error .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }