/* ONE look for every field and every country dropdown — the main screen's (owner 21.10: «all fields, all dropdowns are one»).
 * Linked by the main screen (new_face/index.html), the registration (static/signup.html), the invitation (static/verify.html) and the Account page
 * (static/profile.html); the country picker (static/country_picker.js) draws its markup against the .cs-* rules here. Flags are flag-icon-css
 * (https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/7.2.3/css/flag-icons.min.css, every page that shows a flag links that same file).
 * Colours are the main screen's tokens (new_face/style.css :root); the fallbacks are its light values, so a page without the tokens looks the same. */
.fi { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.cs-field .fi:not([class*=" fi-"]) { display: none; }
.field label, .field .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--label, #3a3a3c); margin-bottom: 6px; }

/* a field: .field / .ap-row hold it, .ff opts a lone control in, .cs-input is the country field */
.field input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="image"], [type="color"]),
.field select, .field textarea, .ap-row input:not([type="radio"], [type="checkbox"]), .ap-row select, .ff, .cs-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--field-line, #d1d1d6); border-radius: 8px;
  font: inherit; font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif); line-height: 1.5;   /* one font and height on every page */
  font-size: 16px;   /* MOB-ZOOM-1: never under 16 px — iOS Safari zooms into a smaller field on focus */ color: var(--fg, #1d1d1f); background: var(--sheet, #ffffff); outline: none;
}
.field input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="image"], [type="color"])::placeholder,
.field textarea::placeholder, .ap-row input::placeholder, .ff::placeholder, .cs-input::placeholder { color: var(--faint, #68686d); }
.field input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="image"], [type="color"]):focus,
.field select:focus, .field textarea:focus, .ap-row input:focus, .ap-row select:focus, .ff:focus, .cs-input:focus, .cs-input[aria-expanded="true"] { border-color: var(--accent, #0071e3); }
select.ff, .field select, .ap-row select { width: auto; max-width: 100%; }
.field input:disabled, .field input[readonly] { cursor: not-allowed; }   /* a fixed value (the invitation / reset e-mail): same look, no caret */
.field select { width: 100%; }
select.ff, .field select, .ap-row select {   /* the same box as a text field, the chevron drawn like the country field's */
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--faint, #68686d) 50%), linear-gradient(135deg, var(--faint, #68686d) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input.err, .field select.err, .field textarea.err { border-color: var(--stop, #b3261e); }   /* a field that failed its check: red is only an error */
.field textarea { resize: vertical; line-height: 1.4; }
/* FACE-AUTOFILL-1 (owner 18.10, iPhone Safari): the form's fields are SEARCH fields — iOS offers «AutoFill Contact» over a text field that
   looks like a name or a country whatever autocomplete says, never over a search box; the box looks like the text field it was: no native
   rounded look, no clear cross (the country field has the flag and the list, the name field its own list) */
.field input[type="search"], .cs-input { -webkit-appearance: none; appearance: none; border-radius: 8px; box-sizing: border-box; }
.field input[type="search"]::-webkit-search-decoration, .field input[type="search"]::-webkit-search-cancel-button,
.field input[type="search"]::-webkit-search-results-button, .field input[type="search"]::-webkit-search-results-decoration,
.cs-input::-webkit-search-decoration, .cs-input::-webkit-search-cancel-button, .cs-input::-webkit-search-results-button, .cs-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* the country field is the search itself (owner 17.10, OT-1810): the flag sits inside it on the left, the chevron on the right; the
   list opens under it on focus and the typed text narrows the list */
.cs-field, .cs-host { position: relative; }   /* .cs-host: where the picker draws itself into a page (country_picker.js mount) */
.cs-field .fi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.cs-field.has-cc .cs-input { padding-left: 42px; }
.cs-input { padding-right: 36px; cursor: pointer; text-overflow: ellipsis; }
.cs-input:focus { cursor: text; }
.cs-field::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--faint, #68686d); border-bottom: 1.5px solid var(--faint, #68686d); transform: rotate(45deg) translateY(-2px); position: absolute; right: 14px; top: 50%; margin-top: -3px; pointer-events: none; }
.cs-list {
  position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--sheet, #ffffff); border: 1.5px solid var(--field-line, #d1d1d6); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.cs-list button {
  font: inherit; color: var(--fg, #1d1d1f); background: transparent; border: 0; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-align: left; cursor: pointer;
}
.cs-list button:hover, .cs-list button[aria-selected="true"] { background: var(--seg, #f2f2f7); }
/* FACE-NEW-1: the country picker's pop-up — the last three countries checked come first */
.cs-pop { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; background: var(--sheet, #ffffff); border: 1.5px solid var(--field-line, #d1d1d6); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.cs-pop[hidden] { display: none; }
.cs-pop .cs-list { position: static; margin: 0; border: 0; box-shadow: none; border-radius: 0 0 8px 8px; }
.cs-list li.cs-sep { padding: 6px 12px 2px; font-size: var(--t-cap, 11px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #66666b); }
.cs-list li.cs-sep + li button { border-top: 0; }
.cs-list li.cs-none { padding: 8px 12px; font-size: var(--s-meta, 13px); color: var(--muted, #66666b); }
.cs-list { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }   /* FACE-NEW-1: ~40 countries scroll inside the pop-up, iOS Safari too */
@media (max-height: 700px) { .cs-list { max-height: 50vh; } }
/* FACE-8: tap targets of at least 44 px for touch and narrow screens (WCAG 2.5.5) */
@media (pointer: coarse), (max-width: 600px) { .cs-input, .cs-list button { min-height: 44px; } }
@media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } }   /* MOB-ZOOM-1 */