/* Country of residence (ARCHITECTURE §14): the searchable country field (views/residence.js
   countryPicker), the Ukraine region declaration, the once-only prompt and the screen a
   restricted account sees. Loaded by app.html and checkout.html after base.css. */

/* ---- The country field (an ARIA combobox; the list opens under it, in the page flow, so
   it never hides behind a dialog edge or a phone keyboard) ------------------------------- */
.field + .residence, .residence + .field { margin-top: var(--space-4); }
.country-picker { position: relative; min-width: 0; }
.country-control { position: relative; display: flex; align-items: center; }
.country-control .input { padding-right: 44px; text-overflow: ellipsis; }
.country-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 32px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer;
}
.country-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.country-toggle .icon { width: 17px; height: 17px; transition: transform var(--dur-fast) var(--ease); }
.country-picker.is-open .country-toggle .icon { transform: rotate(180deg); }

.country-list {
  list-style: none; margin: 6px 0 0; padding: 4px;
  max-height: min(264px, 42vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.country-list[hidden] { display: none; }
.country-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 40px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-default); cursor: pointer; line-height: 1.3;
}
.country-option:hover, .country-option.is-active { background: var(--bg-hover); color: var(--text-primary); }
.country-option.is-active { box-shadow: inset 2px 0 0 var(--accent); }
.country-option[aria-selected="true"] { color: var(--accent-text); font-weight: 600; }
.country-option-name { min-width: 0; overflow-wrap: anywhere; }
.country-option-code {
  flex: none; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-sm);
}
.country-empty { padding: 10px; color: var(--text-muted); font-size: var(--text-sm); }

@media (pointer: coarse) {
  .country-option { min-height: var(--tap); }
  .country-toggle { width: 40px; height: 40px; right: 2px; }
  .country-control .input { padding-right: 48px; }
}

/* The Ukraine region declaration: a required tick, set apart from the field above. */
.residence-region {
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border-soft); border-radius: var(--radius-input);
  background: var(--bg-input);
}
.residence-region[hidden] { display: none; }
.residence-region .check { font-size: var(--text-sm); }

/* The Account page's profile line. */
.profile-residence { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--space-2); }
.profile-residence .icon { margin-top: 2px; flex: none; }
.profile-residence a { color: var(--text-link); }

/* ---- The once-only prompt ------------------------------------------------------------------ */
.residence-dialog { width: min(520px, calc(100vw - 2 * var(--space-4))); }
.residence-who { margin-top: calc(-1 * var(--space-1)); }
.residence-who a { color: var(--text-link); }
/* "Stop trading", while trading or the autopilot is on (Terms §6: off at any time). */
.residence-stop {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-input);
}
.residence-stop[hidden] { display: none; }
.residence-stop .hint { flex: 1 1 220px; margin: 0; }

/* ---- A restricted account (a sanctioned country of residence) ------------------------------- */
.restricted { max-width: 640px; margin: var(--space-6) auto; }
.restricted-body { display: flex; flex-direction: column; gap: var(--space-3); }
.restricted-body h2 { font-size: var(--text-xl); line-height: 1.25; color: var(--text-primary); }
.restricted-body p { color: var(--text-muted); line-height: 1.55; }
.restricted-body .hint a { color: var(--text-link); }
.restricted-icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--warning-soft); color: var(--warning-text);
}
.restricted-icon .icon { width: 24px; height: 24px; }
.restricted-actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* The app shell of a restricted account keeps only the account menu (sign out). */
body.is-restricted .nav,
body.is-restricted #nav-sections,
body.is-restricted #autopilot-side,
body.is-restricted .topbar-status,
body.is-restricted .run-btn,
body.is-restricted .menu-btn,
body.is-restricted .menu-item[href^="#/"],
body.is-restricted .menu-item[href="/billing"] { display: none; }

@media (max-width: 560px) {
  .restricted { margin: var(--space-3) auto; }
  .restricted-actions > .btn { flex: 1 1 100%; }
}