/* Registration-only layout repair. Shared auth picker colors live in
   auth-readable-theme.html; this file is deliberately limited to registration. */
body.aya-registration-document {
  width: 100%;
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Registration controls follow the visible auth theme, not the browser's OS
   preference. The inputs remain real native controls for keyboard/form use. */
html:not(.dark) body.aya-registration-document {
  color-scheme: light;
}

html.dark body.aya-registration-document {
  color-scheme: dark;
}

body.aya-registration-document .wrapper {
  width: 100%;
  max-width: 520px;
  min-width: 0;
}

body.aya-registration-document .card,
body.aya-registration-document #regForm,
body.aya-registration-document .field,
body.aya-registration-document .registration-country-row,
body.aya-registration-document .phone-input-row {
  min-width: 0;
  max-width: 100%;
}

body.aya-registration-document .card {
  padding: 30px clamp(18px, 5vw, 34px) 32px;
}

/* Residence and language are separate, full-width controls at every width. */
body.aya-registration-document .registration-country-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body.aya-registration-document .registration-country-row > :is(.field, fieldset) {
  width: 100%;
  min-width: 0;
}

body.aya-registration-document .registration-country-row .country-picker-trigger,
body.aya-registration-document .registration-country-row select {
  width: 100%;
  min-width: 0;
}

body.aya-registration-document .registration-country-row .language-options {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.aya-registration-document .registration-country-row .language-option,
body.aya-registration-document .registration-country-row .language-option label {
  min-width: 0;
  width: 100%;
}

body.aya-registration-document .registration-country-row .language-option label {
  min-height: 48px;
  padding: 7px 5px;
  gap: 3px;
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

body.aya-registration-document .registration-country-row .language-option label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.aya-registration-document .registration-country-row .language-name {
  font-size: 12px;
}

/* GSA may reset every input to appearance:none and apply field dimensions.
   Keep each radio focusable/checked natively, but visually clip it away. */
body.aya-registration-document .registration-country-row .language-option input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: auto !important;
  -webkit-appearance: radio !important;
}

body.aya-registration-document .registration-country-row .language-option label {
  position: relative;
  border-color: var(--auth-field-border);
  background: var(--auth-field-bg);
  color: var(--auth-page-text) !important;
  -webkit-text-fill-color: var(--auth-page-text) !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

body.aya-registration-document .registration-country-row .language-option label :is(span, .language-name) {
  color: var(--auth-secondary) !important;
  -webkit-text-fill-color: var(--auth-secondary) !important;
}

body.aya-registration-document .registration-country-row .language-option label:hover {
  border-color: var(--auth-focus) !important;
  background: color-mix(in srgb, var(--auth-field-bg) 88%, var(--auth-focus)) !important;
}

body.aya-registration-document .registration-country-row .language-option label:active {
  background: color-mix(in srgb, var(--auth-field-bg) 78%, var(--auth-focus)) !important;
}

body.aya-registration-document .registration-country-row .language-option input[type="radio"]:checked + label {
  border: 2px solid var(--auth-focus) !important;
  background: color-mix(in srgb, var(--auth-field-bg) 90%, var(--auth-focus)) !important;
  box-shadow: inset 0 -3px 0 var(--auth-focus);
}

body.aya-registration-document .registration-country-row .language-option input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--auth-focus);
}

body.aya-registration-document .registration-country-row .language-option input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--auth-focus) !important;
  outline-offset: 3px;
}

/* An explicit light-surface checkbox avoids inherited dark color-scheme and
   UA-dependent unchecked blocks while preserving native checkbox semantics. */
body.aya-registration-document .checkbox-wrap input[type="checkbox"] {
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 2px solid var(--auth-field-border) !important;
  border-radius: 5px !important;
  background-color: var(--auth-field-bg) !important;
  background-image: none !important;
  color-scheme: inherit;
  cursor: pointer;
}

body.aya-registration-document .checkbox-wrap input[type="checkbox"]:checked {
  border-color: var(--auth-focus) !important;
  background-color: var(--auth-focus) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3.2 3.2L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

html.dark body.aya-registration-document .checkbox-wrap input[type="checkbox"]:checked {
  border-color: #79a5ff !important;
  background-color: #79a5ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3.2 3.2L13 4.5' fill='none' stroke='%23101936' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.aya-registration-document .checkbox-wrap input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--auth-focus) !important;
  outline-offset: 3px;
}

body.aya-registration-document .phone-input-row {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px;
}

body.aya-registration-document .phone-country-select {
  min-width: 0;
  padding-left: 9px !important;
  padding-right: 24px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.aya-registration-document .field label,
body.aya-registration-document .registration-country-row legend {
  max-width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body.aya-registration-document :is(.pw-hint, .field-error, .error-box, .card-sub) {
  max-width: 100%;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.aya-registration-document :is(.field input, .field select, .country-picker-trigger,
  .language-option label, .pw-toggle, .checkbox-wrap input, .btn-primary,
  .footer-link a) {
  min-width: 0;
}

body.aya-registration-document :is(.pw-toggle, .country-picker-trigger,
  .language-option label, .btn-primary, .picker-close) {
  min-height: 44px;
}

body.aya-registration-document .checkbox-wrap label {
  min-height: 44px;
  display: block;
  padding-top: 3px;
}

body.aya-registration-document :is(.field input, .field select, .country-picker-trigger,
  .phone-country-select, .pw-toggle, .language-option label, .checkbox-wrap input,
  .btn-primary, .picker-close, .picker-option, .picker-search-wrap input, a):focus-visible {
  outline: 2px solid var(--auth-focus);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  body.aya-registration-document {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body.aya-registration-document .row-2:not(.registration-country-row) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.aya-registration-document .card {
    padding: 22px clamp(13px, 4vw, 20px) 24px;
  }

  body.aya-registration-document .field {
    margin-bottom: 12px;
  }

  body.aya-registration-document .phone-input-row {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 7px;
  }

  body.aya-registration-document .phone-input-row :is(input, select) {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 350px) {
  body.aya-registration-document .card {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.aya-registration-document .registration-country-row .language-options {
    gap: 5px;
  }

  body.aya-registration-document .registration-country-row .language-option label {
    padding-inline: 3px;
    font-size: 12px;
  }

  body.aya-registration-document .registration-country-row .language-name {
    font-size: 10px;
  }

  body.aya-registration-document .phone-input-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}