/* Shared native one-time-code input presentation. Keep one input so browser
   caret movement and whole-code paste retain their native behavior. */
input[autocomplete="one-time-code"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  /* Override compact-form sizing only for verification-code fields. */
  min-height: 64px !important;
  height: auto !important;
  padding: 10px 14px;
  border: 2px solid #54766f;
  border-radius: 6px;
  background: #f3f8f6;
  color: #163b38;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .32em;
  line-height: 1.2;
  text-align: center;
}

input[autocomplete="one-time-code"]:focus {
  border-color: #174f48;
  outline: 3px solid #a9d2c2;
  outline-offset: 2px;
  background: #fff;
}

input[autocomplete="one-time-code"]:disabled {
  opacity: .62;
}

/* Legacy compact/resume rules use !important. Keep this normalization strictly
   OTP-only, including dynamically prefixed dependant fields, with the same
   specificity as the existing ID rules. Never override hidden/disabled state. */
body :is(#phoneOtp, #resumeOtp, #dependentReauthCode, #accountOtp,
         #staffResetOtp, #financeOtp, input[autocomplete="one-time-code"])[autocomplete="one-time-code"] {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 32px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .28em !important;
  color: #163b38 !important;
  background-color: #f3f8f6 !important;
  min-height: 64px !important;
}

body :is(#phoneOtp, #resumeOtp, #dependentReauthCode, #accountOtp,
         #staffResetOtp, #financeOtp, input[autocomplete="one-time-code"])[autocomplete="one-time-code"]:focus {
  outline: 3px solid #a9d2c2 !important;
  outline-offset: 2px !important;
  background-color: #fff !important;
}

/* Account lookup's previous 10ch/9ch tracks cannot contain the larger field. */
.client-portal-page #accountOtpGroup.account-otp-row-active {
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) minmax(0, 1fr);
}

.client-portal-page #accountOtpGroup.account-otp-row-active input[autocomplete="one-time-code"] {
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  letter-spacing: .32em;
}

/* Schengen main verification and dependent reauthentication controls. */
.client-portal-page .otp-controls {
  grid-template-columns: minmax(13rem, 16rem) minmax(7rem, 1fr) minmax(7rem, 1fr);
  width: 100%;
  gap: 8px;
}

.client-portal-page .otp-controls input[autocomplete="one-time-code"] {
  width: 100% !important;
  max-width: 16rem;
  min-width: 0 !important;
  height: auto;
  min-height: 58px;
  padding-inline: 10px;
  font-size: clamp(1.4rem, 5vw, 1.75rem) !important;
  letter-spacing: .32em;
}

.client-portal-page [data-uk-dependent-editor] > .dependent-account-reauth .otp-controls {
  grid-template-columns: minmax(13rem, 16rem) minmax(7rem, 1fr) minmax(7rem, 1fr);
}

.client-portal-page .wizard-resume [data-resume-code] {
  grid-template-columns: minmax(13rem, 16rem) max-content;
}

.client-portal-page .wizard-resume [data-resume-code] input[autocomplete="one-time-code"] {
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  min-height: 58px;
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  letter-spacing: .32em;
}

/* Staff password recovery: adjust only the dedicated OTP row. */
.staff-reset-code-row {
  grid-template-columns: minmax(13rem, 16rem) minmax(7rem, max-content) minmax(7rem, max-content);
  width: 100%;
}

#staffResetOtp {
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  min-height: 58px;
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  letter-spacing: .32em;
}

/* Finance sign-in actions belong to the OTP form only. */
#financeOtpForm .wl-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

#financeOtpForm .wl-actions > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  white-space: normal;
}

@media (max-width: 600px) {
  .client-portal-page #accountOtpGroup.account-otp-row-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-portal-page #accountOtpGroup.account-otp-row-active input[autocomplete="one-time-code"] {
    grid-column: 1 / -1;
    max-width: none;
  }

  .client-portal-page .otp-controls,
  .client-portal-page [data-uk-dependent-editor] > .dependent-account-reauth .otp-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .client-portal-page .otp-controls input[autocomplete="one-time-code"] {
    grid-column: 1 / -1;
    max-width: none;
  }

  .client-portal-page .otp-controls > button {
    min-width: 0 !important;
    white-space: normal;
  }

  .client-portal-page .wizard-resume [data-resume-code] {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-page .wizard-resume [data-resume-code] input[autocomplete="one-time-code"] {
    max-width: none;
  }

  .staff-reset-code-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #staffResetOtp {
    grid-column: 1 / -1;
    max-width: none;
  }

  #financeOtpForm .wl-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}