/* ════════════════════════════════════════════════════════════════
   Tuesday2 — phone-field.css (M36). Ported from Tuesday src/app/globals.css (.phone-field
   family + .sel-opt rows) for the offline flag+dial phone picker. Engineering-owned infra
   (parity-restoration of the original phone-field style — NOT new design). Tokens resolve
   against styles.css :root. Rule bodies are byte-faithful to the donor globals.css
   (lines 235-245 + 366-369); only the file split is Tuesday2-specific.

   STANDING RULE (M39, donor): .phone-pop is rendered through a React PORTAL to document.body
   so the .bd-body{overflow:auto} dialog body never clips it. .phone-pop is position:fixed and
   anchored to the trigger button's viewport rect by phone-field.jsx. Do NOT move it back to
   position:absolute inside .phone-field. The search input is pinned; only .phone-pop-list scrolls.
   ════════════════════════════════════════════════════════════════ */
.phone-field { display: flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--paper); position: relative; }
.phone-field:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.phone-cc { display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-right: 1px solid var(--line); background: var(--paper-2); font-family: var(--font-mono); font-size: 11px; color: var(--ink); white-space: nowrap; cursor: pointer; border-radius: var(--r-md) 0 0 var(--r-md); }
.phone-cc:disabled { cursor: default; }
.phone-dial { font-weight: 600; }
.phone-num { border: 0; background: none; outline: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink); padding: 9px 12px; width: 100%; }
.phone-pop { position: fixed; z-index: 340; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-dialog); padding: 5px; min-width: 268px; display: flex; flex-direction: column; gap: 4px; }
.phone-pop-search { border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--paper); font-family: var(--font-mono); font-size: 11px; color: var(--ink); padding: 7px 10px; outline: none; }
.phone-pop-search:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.phone-pop-list { max-height: 264px; overflow: auto; display: flex; flex-direction: column; }
.flag { border-radius: 2px; border: 1px solid var(--line); display: block; object-fit: cover; background: var(--paper-2); }

/* Popover country rows (donor globals.css:366-369). */
.sel-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 9px; border-radius: var(--r-sm); cursor: pointer; font-size: 12px; color: var(--ink); }
.sel-opt:hover { background: var(--paper-2); }
.sel-opt.sel { background: var(--orange-soft); }
.sel-opt-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thin scrollbar for .phone-pop-list (donor globals.css:435-437 fragment, .phone-pop family). */
.phone-pop-list { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ink) 28%, transparent) transparent; }
.phone-pop-list::-webkit-scrollbar { width: 8px; height: 8px; }
.phone-pop-list::-webkit-scrollbar-track { background: transparent; }
.phone-pop-list::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink) 28%, transparent); border-radius: 8px; }