/* ==========================================================================
   mobile-field -- the ONE mobile-number control (S333 OCT21-UX Seq #11, platform-systemwide.md Q361).
   MARKUP (templates/shared/_mobile_field.html): .mobile-field > .mobile-field__row (country chip + the number input(s)) + .mobile-field__aux (the "Foreign number" link and, on
   staff screens only, the "Mobile not available" checkbox). Behaviour: static/shared/mobile_field.js (with the digit formatting of static/shared/field_validation.js).
   The input itself keeps the family's own input atom (passed as a class), so size, border and focus come from the family; this file only lays the row out.
   Shared partial: Tier 0 and its own `--mobile-field-*` interface only (design_lint Rule 9). INTERFACE (all optional): --mobile-field-radius --mobile-field-border --mobile-field-cc-bg
   --mobile-field-cc-fg --mobile-field-link --mobile-field-muted --mobile-field-focus
   ========================================================================== */
.mobile-field { display: block; width: 100%; }
.mobile-field__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.mobile-field__row > small, .mobile-field__row > .field-validate-msg { grid-column: 1 / -1; }
.mobile-field__row > input { margin: 0; min-width: 0; border-start-start-radius: 0; border-end-start-radius: 0; padding-inline-start: 0.5rem; }
.mobile-field__row > input[hidden], .mobile-field__row > [hidden] { display: none; }
.mobile-field__cc {
  position: relative; display: inline-flex; align-items: center; gap: 0.125rem; box-sizing: border-box; padding-inline: 0.5rem;
  border: 1px solid var(--mobile-field-border, currentColor); border-inline-end: 0;
  border-start-start-radius: var(--mobile-field-radius, 0.375rem); border-end-start-radius: var(--mobile-field-radius, 0.375rem);
  background: var(--mobile-field-cc-bg, transparent); color: var(--mobile-field-cc-fg, inherit);
  font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mobile-field__cc select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font: inherit; }
.mobile-field__cc:focus-within { outline: 0.125rem solid var(--mobile-field-focus, currentColor); outline-offset: -0.125rem; }
.mobile-field__cc svg { width: 0.875rem; height: 0.875rem; flex: none; }
.mobile-field__cc [hidden] { display: none; }
.mobile-field__aux { display: flex; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 2rem); align-items: center; column-gap: 1rem; margin-top: 0.25rem; min-height: 1.25rem; }   /* EXEC-75: "Foreign number" and "Mobile not available" share ONE row (it sizes to its content and may run past a narrow column into the free space beside it), rows of 1.25rem: the pair costs one line, not two */
.mobile-field__link {
  display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0; border: 0; background: none; color: var(--mobile-field-link, inherit); font: inherit; font-size: 0.8125rem; line-height: 1.25; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}
.mobile-field__link:focus-visible { outline: 0.125rem solid var(--mobile-field-focus, currentColor); outline-offset: 0.125rem; }
.mobile-field__link:disabled { opacity: 0.5; cursor: not-allowed; }
.mobile-field .mobile-field__check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.25rem; line-height: 1.25; font-size: 0.8125rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--mobile-field-muted, inherit); cursor: pointer; }
.mobile-field__check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--mobile-field-link, currentColor); }
.mobile-field__check input:disabled ~ span { opacity: 0.5; }
.mobile-field[data-mf-mode="foreign"] .field-mobile-count, .mobile-field[data-mf-mode="foreign"] .field-mobile-overflow { display: none; }
.mobile-field.is-unavailable .mobile-field__row { opacity: 0.55; }
.mobile-field.is-unavailable .field-mobile-count { display: none; }
.mobile-field.is-unavailable .mobile-field__row input { cursor: not-allowed; }